6.1 – The five modes

options:
  variant: dropdown
  mobile: offcanvas   # same (default) | accordion | offcanvas | select | hidden

mobile	Below the mobile breakpoint
same	stays as it is; a row wraps
accordion	becomes a stacked list with expandable folders
offcanvas	disappears behind a burger button and slides in as a panel from the left
select	becomes a jump menu
hidden	disappears

same

For everything that is narrow anyway: tree, accordion, pager, select. For a horizontal bar only if it has very few entries.

accordion

A row becomes a list stacked vertically, and folders with children become expandable. On smartphones they start closed — except the path to the current page and whatever persistState remembered. On the desktop they stay open and their title a link; the expand button is invisible there.

Suits bar, tabs and columns, which otherwise have no expandable folders, and dropdown and mega, whose menus move into the flow of the page on smartphones.

If someone rotates their tablet across the breakpoint, the folders follow — they close or open without reloading the page.

offcanvas

options:
  variant: bar
  depth: 2
  mobile: offcanvas
layout:
  position: header

In place of the navigation there is a burger button. It opens a panel that slides in from the left, with a close button at the top and a dimmed background behind it. The panel shows the navigation as a stacked list with expandable folders, as with accordion.

The panel closes via the button, a click on the background, Escape or a page change. While it is open, the page behind it does not scroll.

That is the usual choice for the menu bar in the header.

Not in a column that holds its children

The panel sits fixed over the window (position: fixed). An ancestor with transform, filter or a mask turns “over the window” into “over this ancestor” — the panel then appears squashed or cut off. The header of a Quartz site is the safe place for it; a scrolling sidebar is not.

It can be operated by keyboard too: the switch behind the burger button is a checkbox that receives focus and reports its state through aria-expanded.

select

The list gives way to a jump menu, as variant: select shows (4.3): first-level folders as groups, folder pages as “Overview”. It does not get more compact — but you only see the structure once you open the menu. Needs JavaScript.

Suits a large sidebar that would end up below the text on a smartphone.

hidden

The navigation disappears. Right when another navigation takes over its job on smartphones — a sidebar with hidden next to a header bar with offcanvas, for instance. The chapter navigation of this website is hidden; on smartphones the pager below the text remains.

Quartz’s own display

Quartz knows display: desktop-only and mobile-only in the layout block. It works similarly to mobile: hidden but is applied by Quartz itself: the component is then wrapped in a container of its own, and the breakpoint is Quartz’s. mobile: hidden hides the navigation itself and can honour a different breakpoint from breakpoints (6.2).