Coding website in Quarto - menus

Finding workarounds for menu structures

As I have moved my website from wordpress (which failed me miserably) to Quarto in RStudio, I have learned a lot about how to build the site and aspects of the site in Quarto. I will say that the “help” on the Quarto site is less than ideal on the topic of menus, so I am going to spend some time here fleshing out what I have done on the off chance it helps someone else.

First off, I wanted to build a site that had totally separate parts. By this, I mean, I wanted a “Work” site that would allow me to open up links I used almost daily, without typing in the links, or keeping track of them. This is purely a selfish, ‘spend an hour building a site, so I can save seconds every day’ type of thing. But it works for me.

So my “Work” site needed a menu structure that was self contained. I wanted to be able to share the work site with colleagues and open up the work page in front of students, without giving away personal information like where I shop, or where I bank (that is a private site). I also wanted a public facing site for my blog and an about me page. Maybe there would be more there in the future, but for now, those are the most important things on that branch.

So that means I wanted a Public group of links, a Work set of links, and a Private set of links. It is all built on the same platform, but none of them are cross linked or interconnected.

The help above says it is a “Hybrid” navigation, but it was not clear. So, on to the learning!

Here is what I figured out.

In my _quarto.yml file, I have the following code:

  sidebar:
  - id: public
    style: "docked"
    contents: 
      - text: "Home"
        href: index.qmd
      - text: "About Me"
        href: about.qmd
        
  - id: worklinks
    style: "docked"
    contents: 
      - text: "Work Links"
        href: work.qmd

    - id: private
    style: "docked"
    contents: 
      - text: "Personal Links"

I have more than those few links, but the important chunk is the “id: public” or “id: worklinks” line. Those lines define all the links below as part of the menu I define.

Then, in the page I create, I have the command “sidebar: public” in the top Title Block. This is the actual sidebar used for all of the blog pages, and tells Quarto to add the particular menu structure I want to the particular page.

So how does it all work in reality? Pretty sweet.

This is the public menu, and the “Home” words will take a person always to this page. I circled the “Home” on the menu bar, because that takes me to my private menu structure (which I am not showing here because … well … private.) So, I can access any menu structure I want from any page, as long as I am logged into the computer and my settings are saved. If I am on a public computer, I am not using my private links anyway.

And from my private menu structure, I have a work link, which takes me to my work page, or I can just type in the link when I am in a classroom and need my work links.

You can literally have as many sidebars as you want for your site / pages. All you need to do is build them out in the _quarto.yml file, and give them a different “id: name”. Then use that name in the Title Block to tell Quarto to use sidebar menu structure A, instead of B.

Voila!

It took me quite some time to figure this out. It is really easy, and much easier than the Quarto help makes it seem.

I hope this can help someone else along the way. Drop me note at BlueSky if it does.