Sidebar menu

Website
Blog
Posts
Sidebar
menu
quarto
Sidebar menu for documentation
Author

Marcelo Rosales

Published

July 28, 2023

Modified

July 28, 2023

Adding a Sidebar

To Create a side bar for a specific page within a main drop-down menu:

Important

If there is only one sidebar id, the sidebar will be displayed in all the pages and menus regardless of their location.

To Create a sidebar for a specific page 2 or more sidebar id’s are required

  1. In the _quarto.yml file create the drop-down menu.

    website:
  navbar:

    left:
      - text: "Home"
      - text: "dropdown" # drop-down menu name   
        menu: 
          - text: "Section1_name"
            href: files/dropdown/section1_name/landing_page1.qmd 
          - text: "Section2_name"
            href: files/dropdown/section2_name/landing_page2.qmd # most be named index.qmd? or any name ok?

  2. In the _quarto.yml file create the sidebar and id for the page.

    1. If only one sidebar id, then sidebar will be displayed in all pages.

    2. If 2 or more sidebar id’s, then it will be displayed only in the specified page.

      sidebar:
    - id: section1_name 
      title: "Get Started with the docs"
      style: "floating"
      collapse-level: 3
      align: left
      contents:  
        - text: "Section Intro"
          href: files/dropdown/section1_name/landing_page1.qmd  
        - text: "Doc 1"
          href: files/dropdown/section1_name/doc1.qmd  
        - text: "Doc 2"
          href: files/dropdown/Section1_name/doc02.qmd

    - id: section2_name 
      title: "Get Started with the docs"
      style: "floating"
      collapse-level: 3
      align: left
      contents:  
        - text: "Section Intro"
          href: files/dropdown/section2_name/landing_page2.qmd  
        - text: "Doc 1"
          href: files/dropdown/section2_name/doc1.qmd  
        - text: "Doc 2"
          href: files/dropdown/Section2_name/doc02.qmd

  3. full _quarto.yml code

    website:
  navbar:

    left:
      - text: "Home"

      - text: "dropdown" # drop-down menu name   
        menu: 
          - text: "Section1_name"
            href: files/dropdown/section1_name/landing_page1.qmd 
          - text: "Section2_name"
            href: files/dropdown/section2_name/landing_page2.qmd # most be named index.qmd? or any name ok?

  sidebar:
    - id: section1_name 
      title: "Get Started with the docs"
      style: "floating"
      collapse-level: 3
      align: left
      contents:  
        - text: "Section Intro"
          href: files/dropdown/section1_name/landing_page1.qmd  
        - text: "Doc 1"
          href: files/dropdown/section1_name/doc1.qmd  
        - text: "Doc 2"
          href: files/dropdown/Section1_name/doc02.qmd

    - id: section2_name 
      title: "Get Started with the docs"
      style: "floating"
      collapse-level: 3
      align: left
      contents:  
        - text: "Section Intro"
          href: files/dropdown/section2_name/landing_page2.qmd  
        - text: "Doc 1"
          href: files/dropdown/section2_name/doc1.qmd  
        - text: "Doc 2"
          href: files/dropdown/Section2_name/doc02.qmd #.. etc

  4. Create the folders where the files will be contained and where the page will list from

    mkdir files/dropdown/Section_name/

  5. Create the landing page?

    ---
title: "Landing page"
author: "Marcelo Rosales"
date: "2023/07/26"  # Publication date, also can use: today
date-meta: "2023/07/20"  # Date of document creation or last modification. It is not shown in render
date-modified: last-modified
subtitle: Comprehensive guide to using 
page-layout: article
anchor-sections: false
search: false
# listing: 
#   id: Section_name  # Only if you want a blog like list of the files/docs in the section/folder  
#  template: ../../ejs/links.ejs
#  contents: guide.yml
#image: /images/hero_right.png
---

  6. Code for subsequent files/doc/posts

    ---
title: "Doc 1"
author: "Marcelo Rosales"
---

  7. Add more section if needed.

  8. Code for subsequent files/doc/posts