7.3 – Markup and accessibility

The structure

nav.quartz-nav.quartz-nav--<variant>.quartz-nav--mobile-<mode>
  h3.quartz-nav__title                                  title
  div.quartz-nav__panel
    div.quartz-nav__root > a.quartz-nav__root-link       showScopeRoot
    ul.quartz-nav__list[data-level]
      li.quartz-nav__item.quartz-nav__item--page|--folder
        a.quartz-nav__link > icon + span.quartz-nav__text
        details.quartz-nav__folder > summary + ul        expandable folders

Depending on variant and mode there are also: button, background and close button of the mobile menu, the jump menu, the two links of the pager. All classes carry the quartz-nav prefix; the explorer and other components are not touched.

States

Class / attribute	Where
active	<li> and <a> of the current page
aria-current="page"	link of the current page
active-trail	every folder on the path to it
quartz-nav__item--parent	folders whose children are shown
quartz-nav__item--split	rows with a link and their own expand button
quartz-nav--align-<value>	horizontal variants

id

options:
  id: sidebar

Every navigation has an ID. Without id the plugin derives it from all options (nav- and a checksum). You need a fixed id in three cases:

1. CSS for exactly this navigation — .quartz-nav[data-quartz-nav="sidebar"]. A checksum changes with every option, and the selector would miss.
2. persistState — memory is stored under the ID. With a checksum it is gone after every option change (5.1).
3. Two navigations with identical options on one page. They would have the same ID and therefore the same element IDs — the burger button of one would open the menu of the other.

Letters, digits, - and _ are allowed; anything else becomes -.

Keyboard and screen reader

• Every navigation is a <nav> with a name of its own: ariaLabel, otherwise title, otherwise “Main navigation” — for the pager “Previous and next page”. With several navigations on one page, each deserves its own ariaLabel or a title, so they can be told apart in the list of landmarks.
• Expandable folders are <details> and <summary>. With folderClick: toggle the row is a single control with the title; with link the title is a link and the button next to it is called “Expand
• Chevrons and icons are hidden from screen readers.
• Menus close with Escape and return focus to their folder; trigger: hover also opens on keyboard focus (5.2).
• The mobile menu hangs on a focusable checkbox with aria-expanded and aria-controls; Escape closes it and puts focus back.
• The jump menu navigates by keyboard only on Enter, not while arrowing through.
• Motion is dropped with prefers-reduced-motion.

The plugin’s words

“Main navigation”, “Overview”, “Home”, “Previous”, “Next”, “Jump to…”, “Go” and “Expand …” come with the plugin in English and German. Which language it uses is decided on a multilingual site by the language of the page (8.3), otherwise by the site’s locale: German for de-DE and any other German variant such as de-AT, English for everything else.

title and ariaLabel can be changed; the others cannot. The plugin does not translate these two: on a bilingual site a navigation with its own text therefore needs one entry per language. What that looks like is in 8.3.