8.3 – More recipes

Replacing the explorer

  - source: "@quartz-community/explorer"
    enabled: false
  - source: github:boxi-os/quartz-navigations
    enabled: true
    options:
      variant: accordion
      folderClick: link
      persistState: true
      stripNumericPrefix: true
      mobile: offcanvas
      id: explorer
    layout:
      position: left
      priority: 30

Like the explorer, but with folder rows that lead to their page, an order of your own (2.2) and a burger menu on smartphones. The fixed id keeps the memory across later option changes.

stripNumericPrefix only if the titles do not start with a number themselves (2.1).

A blog by date

  - source: github:boxi-os/quartz-navigations
    enabled: true
    options:
      variant: pager
      rootPath: blog
      sort: date
      sortDirection: desc
      ariaLabel: Newer and older post
      id: blog-pager
    layout:
      position: afterBody
      priority: 10

Visible only below blog, newest first. Note: with desc, “Previous” is the newer post and “Next” the older — the order of the list, not of time. Posts without a date come last. A sidebar in manual order gets along with it (1.3).

Multilingual sites

With quartz-multilanguage, one entry shows the tree of each page’s language on every page, with no further option:

  - source: github:boxi-os/quartz-navigations
    enabled: true
    options:
      variant: accordion
      id: navigation
    layout:
      position: left
      priority: 30

That holds for all four layouts quartz-multilanguage knows:

Layout	Example
Language folders	de/docs/setup.md, en/docs/setup.md
Default language in the root	docs/setup.md, en/docs/setup.md
Language suffix in the file name	docs/Setup.md, docs/Setup.en.md
Language in the frontmatter	blog/hallo.md with lang: de, blog/hello.md with lang: en

quartz-multilanguage stores on every page its language and a path without language folder or suffix: en/docs/setup and docs/setup.en both become docs/setup. The navigation places pages by that path but links to the real ones. Generated folder pages, which carry no language, get into the right language through the pages next to them.

• Paths in the options are language-neutral. rootPath: docs, order, nodeIcons and include/exclude apply to every language alike. include and exclude also match the real path, so exclude: [en] leaves out the English pages.
• The plugin’s words and alphabetical sorting follow the page (7.3, 2.2).
• Your own texts do not. title and ariaLabel read the same in every language. If you need a heading, add one entry per language with a fixed language (below).
• A language folder’s start page (de/index.md) wins over an index.md in the root.

The option language

Value	Effect
auto (default)	the tree in the language of the current page
a language code such as de or en-US	always that language’s tree; en-US finds pages marked en
all	no languages: one tree with every page, language folders as folders — the behaviour up to version 0.2

A code no page carries yields no navigation and a message (9.2). Pages that belong to several languages or to none — a folder page shared by suffix pages, tag pages — get the default language, the way quartz-multilanguage decides for them (9.3).

A heading per language

A chapter tree in the right column, headed “In diesem Kapitel” on German pages and “In this chapter” on English ones:

  - source: github:boxi-os/quartz-navigations
    enabled: true
    options:
      variant: tree
      language: de
      scope: section
      showScopeRoot: true
      title: In diesem Kapitel
      mobile: hidden
      id: kapitel-de
    layout:
      position: right
      priority: 5

The English entry differs in language: en, in title and id.

• Two entries, because title is text. The navigation translates the plugin’s own words, not a heading of yours.
• language: de always shows the German tree. On an English page the page is not in it, scope: section finds no chapter, and the entry does not appear (3.1). The English one disappears on German pages in the same way — so every page shows exactly one.
• scope: section shows the chapter the page is in; showScopeRoot puts the chapter name above it as a link.

Until 24 September 2026 exactly this tree stood on this website. It gave way to the template’s menu, which expands the current page’s chapter by itself (8.1).

Entries per language folder from version 0.2

Up to version 0.2 every language needed its own entry, with rootPath: en or exclude: [en]. Such entries keep working: a rootPath that names a language folder shows that language’s tree from the folder on, and with hideOutsideRoot only on pages inside it. include: [en] has the same effect. The separate entries are only needed for your own texts now.

Sections as tabs above the text

  - source: github:boxi-os/quartz-navigations
    enabled: true
    options:
      variant: tabs
      align: full
      mobile: select
      ariaLabel: Sections
      id: tabs
    layout:
      position: beforeBody
      priority: 5

The sections as tabs across the full width, the pages of the active section in the second row. On smartphones a jump menu instead of two rows that wrap.

A jump menu on smartphones only

  - source: github:boxi-os/quartz-navigations
    enabled: true
    options:
      variant: tree
      depth: 2
      mobile: select
      title: Contents
      id: contents
    layout:
      position: left
      priority: 30

On the desktop a tree in the column, on smartphones a single select field that takes hardly any room. The title sits above in both versions.

A sitemap for part of the site only

  - source: github:boxi-os/quartz-navigations
    enabled: true
    options:
      variant: columns
      rootPath: docs
      hideOutsideRoot: false
      depth: 2
      title: Documentation
      id: docs-sitemap
    layout:
      position: footer
      priority: 10

hideOutsideRoot: false shows the documentation in the footer on every page of the site, not only inside docs (3.2).