Navigation

A site of ten pages needs no navigation: the menu shows everything and the reader sees where they are. At forty, the same menu asks them to scroll past what does not concern them.

This lesson turns on three things, in the order you will want them.

1. Fold the menu

foldedSidebar: true,

The categories fold, and the branch of the page being read opens on its own — the reader lands where they are, not at the top of a list. A category that is also a page keeps its page as its first entry: the handle of a fold cannot be a link, so it would otherwise become unreachable.

2. Put your own links in the header

headerLinks: [
  { label: 'Blog', href: '/blog/' },
  { label: 'Repository', href: 'https://example.com/repo' },
],

A target starts from the root of a version — /blog/ — or is a full address. A relative target is refused, because it would mean something different on every page.

An entry carrying columns opens a panel instead of leading anywhere:

headerLinks: [
  {
    label: 'Learn',
    columns: [
      {
        title: 'Start here',
        items: [
          { label: 'Install', href: '/guide/install/' },
          { label: 'First page', href: '/guide/first-page/' },
        ],
      },
      {
        title: 'Go further',
        items: [{ label: 'Components', href: '/components/' }],
      },
    ],
  },
],

href and columns together are refused — an entry either leads somewhere or opens a panel.

3. A row of links inside a page

Some pages need their own map: a landing page, the opening of a module. Menu places one where the page needs it, and it is the only navigation that lives in your text rather than in the configuration.

<Menu label="This module">
  <MenuLink href="/examples/making-it-yours/colours/">Colours</MenuLink>
  <MenuLink href="/examples/making-it-yours/navigation/">Navigation</MenuLink>
</Menu>

Past a handful of entries, MenuGroup puts them under a title — the reader stops reading a flat list and starts reading two short ones:

<Menu label="The whole course">
  <MenuGroup title="Learn">
    <MenuLink href="/examples/first-steps/">First steps</MenuLink>
  </MenuGroup>
</Menu>

On a narrow screen the row folds behind its label — the same fold as the header, and no more script than it.

On a phone

Try it the honest way: narrow your browser window until the layout changes. Every fold here is a native details element — it works with JavaScript turned off, and the keyboard opens it like any other.

Check yourself