Areas, the Page List, and Sections

These are three different lists. An Area chooses which Page List is open. The Page List chooses a page. Sections are the headings of that page.

On desktop, Areas appear inline only when the site title, navigation and Header controls fit. Otherwise the Areas button opens the same navigation list in a panel. This adapts to long labels as well as narrow windows; no consumer breakpoint setting is required. Pages still follows its own mobile sidebar behavior. Very long site titles may be shortened visually, while their full accessible name is retained.

Role	Where it appears	What you put there
Areas	Header	One item per group of pages
Page List	Left column, titled Pages	The pages in the current Area
Sections	Right column, titled Sections	Nothing. Quarto lists the current page’s headings

The open page has a lightly tinted row and a semibold label in the Page List. Parent group rows keep their usual treatment when a child page is current.

website:
  navbar:
    left:
      - href: index.qmd
        text: Guide
      - href: reference.qmd
        text: Reference
  sidebar:
    - title: Pages
      style: docked
      contents:
        - text: Overview
          href: index.qmd
        - text: Measure
          href: guide/measure.qmd
    - title: Pages
      style: docked
      contents:
        - text: Overview
          href: reference.qmd
        - text: API
          href: reference/api.qmd

Opening Guide shows the first Page List. Opening Reference shows the second. toc-title: Sections and toc-location: right make the right column. A heading belongs only in Sections, not in the Page List, and not as another Area.

Pages in one Area share a purpose. This Usage area is that kind of split: Add Askr, this page, Versioning Docs, and Search are separate pages because each one is a different job.

On mobile, Areas and Pages are separate disclosures. If both controls are available during a transition, the most recent user action determines which one remains open. Escape and backdrop clicks close the active panel and return focus to its opener. Selecting a link still uses the browser’s normal full-page navigation.

Navigation uses the browser’s native full-page behavior. Before revealing the page, Askr waits for the document, fonts, native header offsets, responsive Areas, and version links to settle across two animation frames. If this takes longer than 180ms, a localized loading status appears. The page continues after 1800ms even if a dependency has not settled. Without JavaScript, the static page remains visible. Quarto still controls page geometry.

This gallery’s Areas are Gallery, Components, Usage, Credits, and Long list. The reading of that split is on the Layout page.