Adding new navbar pages

_quarto.yml is the website configuration file

_quarto.yml is a special file in that it:

1. defines how to "stitch" together all of our individual pages into one beautiful website 😃
2. defines project-level metadata, which is inherited by all other files in the project directory

The Openscapes _quarto.yml file currently comprises four main sections:

• project: defines the Quarto project type as a website
• website: update the navbar happen here
• page-footer: update the page footer here
• format: apply site-wide formatting (e.g. main font style, link a stylesheet(s), etc.)

The following instructions focus on updating the website navbar.

File organization conventions

• index.qmd is the website landing page and should (must?) live in the project's root directory
• all other webpage .qmd files (except for events and blog posts) also live in the root directory -- these can get moved into a subdirectory if desired (but you'll have to update file paths to each of them in the _quarto.yml file).

Adding new pages to the navbar

Adding and linking a new webpage in the navbar is easy!

1. Create a new page by adding a .qmd file to the root directory (if following the conventions above)
2. Navbar pages are added under the navbar YAML option. The text options allows you to specify how you'd like the page title text to appear in the navbar. The href option is the file path to the .qmd file (if it's saved to the project's root directory, you only need the file name). You are able to add pages directly to the navbar or as submenu pages. See the example below:

# ~ additional metadata omitted for brevity ~

website:                                  # all pages get "stitched" together under the `website` section of `_quarto.yml`
  navbar:
    # ~ additional metadata omitted for brevity ~
    right:
      - text: "HOME"
        href: index.qmd
      - text: "THIS IS MY NEW PAGE"        # text as you'd like it to appear in the navbar
        href: my_new_page.qmd              # file that you are linking
      - text: "ABOUT"                      
        menu:
          - text: "WHO ARE WE?"
            href: who_are_we.qmd
          - text: "OUR APPROACH"
            href: approach.qmd
          - text: "MY NEW SUBMENU PAGE"    # text as you'd like it to appear in the navbar dropdown menu
            href: my_new_submenu_page.qmd  # file that you are linking

# ~ additional metadata omitted for brevity ~

The above _quarto.yml would generate this:

Check out the Quarto documentation on website navigation for many more options, examples, and instructions.