4.2 – Horizontal

The four horizontal variants put the first level into a row. They differ in what happens to the levels below. The row itself has no glyphs, and all entries are the same size.

bar

options:
  variant: bar
  depth: 1

A row of links. With depth: 1 that is the classic menu bar. If deeper levels are allowed, they sit in the same row behind their folder, whose name then gets a colon. That works for two levels with few entries, in a footer for instance; for more there is dropdown.

dropdown

options:
  variant: dropdown
  depth: 2
  trigger: click   # or hover

The first level in the row; a folder opens a menu below with its children. Deeper levels are indented in the same menu. Pages on the first level are ordinary links.

A menu that would stick out of the window on the right is hung from the right edge of its entry by the script. Opening one closes the other; Escape and a click elsewhere close all (5.2).

mega

options:
  variant: mega
  depth: 3
  trigger: hover
  folderClick: link

Like dropdown, but the menu is wide and split into columns: the second level forms the column headings, the third sits below them. Right for large sites with sections that each have several subsections. The width is set by --quartz-nav-mega-min-width (7.2).

tabs

options:
  variant: tabs
  tabs:
    secondary: true   # default

The first level as tabs. If the current page lies in a first-level folder, its children appear in a second row below. With secondary: false it stays at the tab row.

Right for sites with a few large sections between which you rarely switch. There is no showHome for tabs — the tab row has no place for it.

align — aligning the row

options:
  align: center   # left (default) | center | right | full

Value	Result
left	entries at the start
center	entries in the middle
right	entries at the end
full	every entry gets an equal share of the width

Applies only to bar, dropdown, mega and tabs; the other variants ignore the option. With mobile: accordion or offcanvas the entries stack below the mobile breakpoint and the alignment no longer applies; with the default mobile: same the row just wraps (chapter 6).

Which of the four?

Question	Answer
Only the sections, no subpages?	bar with depth: 1
Sections with a handful of pages?	dropdown
Sections with subsections?	mega
A few sections, and you should see which one you are in?	tabs