8.1 – The navigations of this site

Two navigations are visible on this page: the menu in the left column, with the chapter of the current page expanded, and the previous/next links below the text. On smartphones the menu becomes a drawer behind a burger button. In the configuration they are two entries, and both serve both languages.

id	Variant	Place	Language
menue	accordion	left column, a drawer on smartphones	the page’s
seiten-pager	pager	below the text	the page’s

It is the same navigation as in the other handbooks of this series and in the template they are built with. On the right is Quartz’s own table of contents for the page.

How the languages are laid out here

The German pages are in the root, the English ones under en/; quartz-multilanguage recognises English by the folder and gives every other page the default language, German. From that the navigation builds one tree per language: the German one holds only the German pages, the English one only the English pages, and without the folder en — en/1-getting-started appears in it as 1-getting-started. How this works for every layout is in 8.3.

The menu

  - source: "@quartz-community/explorer"
    enabled: false
  - source: github:boxi-os/quartz-navigations
    enabled: true
    options:
      variant: accordion
      showHome: true
      folderClick: toggle
      indexEntry: first
      exclusive: true
      mobile: offcanvas
      id: menue
      className: nav-menue
      breakpoints:
        mobile: 900px
        desktop: 1200px
    layout:
      position: left
      priority: 30

• Instead of the explorer. Quartz’s explorer is switched off; the menu stands in its place.
• One entry for both languages. Without a title there is no text of its own, and with the default language: auto the menu shows the nine German chapters on German pages and the nine English ones on English pages.
• accordion with every page. The chapter of the current page is open, the page marked (5.1).
• exclusive keeps one chapter open at a time; nine open chapters would be 45 rows.
• folderClick: toggle: a click anywhere on a chapter row expands and collapses it.
• indexEntry: first therefore puts “Overview” as the first row into every chapter — otherwise the chapter page could not be reached from the menu (3.2).
• showHome puts “Home” in front, “Start” on German pages — each time the start page of the page’s own language.
• mobile: offcanvas puts the menu behind a burger button on smartphones (6.1).
• className: nav-menue is the name under which the template styles the menu: the drawer, the burger where the explorer’s button would otherwise sit, colours and spacing from its variables. This website needs no file of its own for it.

The pager

  - source: github:boxi-os/quartz-navigations
    enabled: true
    options:
      variant: pager
      id: seiten-pager
      className: nav-pager
      breakpoints:
        mobile: 900px
        desktop: 1200px
    layout:
      position: afterBody
      priority: 80

One entry for both languages. With the default language: auto the pager pages through the tree of the language the page is written in: after the last German page nothing follows, not the English start page.

The words come out right by themselves. “Previous” and “Next” on English pages, “Zurück” and “Weiter” on German ones, and the name for screen readers likewise (7.3). Neither labels: false nor an ariaLabel is needed.

What both entries share

• breakpoints in both entries, because this website’s layout frame breaks at 900 pixels and not at the 800 from variables.scss (6.2). desktop is accepted but currently used by no rule of the plugin.
• The same tree-shaping options. The build therefore computes two trees, one per language, and not four (1.3).

What is not switched on here

stripNumericPrefix. The titles of this website start with their number — “8.1 – The navigations …” — and the option would take “8.” off (2.1). Sorting is still right: by the numbers of the file and folder names, 01-…, 02-….