Header

The header has two rows:

Row 1: the logo, the search, header.links and the theme switcher.
Row 2: one tab per navigation entry. See Navigation.

On narrow screens both rows collapse into the menu.

header:
  themeSwitcher: true
  links:
    - label: Status
      href: https://status.acme.com
    - label: Solutions
      items:
        - label: Tracking
          icon: globe
          description: Real-time tracking
          href: /docs/tracking
          items:
            - { label: Webhooks, icon: webhooks-logo, href: /docs/webhooks }
    - label: Sign up
      href: https://dashboard.acme.com/signup
      style: primary

Links and buttons

A link has a label and an href. style makes it a button:

`style`	Looks like
`link` (default)	Plain text link
`button`	Outlined button
`primary`	Filled button in the accent color

Add an icon to show a Phosphor icon before the label.

Dropdowns and mega-menus

A link with items instead of href opens a dropdown. When any item has an icon or a description, the dropdown becomes a mega-menu with a card per item.

Each mega-menu item can have its own items: shortcut links shown under it.

Item key	Meaning
`label`, `href`	Required.
`icon`	Phosphor icon name.
`description`	One line under the label.
`badge`	Small label next to the item: `New`, or `{ text: Beta, variant: caution }`.
`items`	Shortcut links: `{ label, href, icon }`.

The menus follow the WAI-ARIA disclosure pattern: they open on click or Enter, close on Escape, and focus alone never opens them.

Icons

Every icon name in the config is a Phosphor icon name: book, code, rocket, package, lightning, github-logo, and so on. An unknown name shows a question mark and a build warning.