SideNav

The navigation of an app: groups of entries, each a link, the page being read marked aria-current="page". Built on MenuItem.

import { SideNav } from '@zitdevs/ui';

Examples

<SideNav
  id="app-nav"
  label="Main"
  groups={[
    {
      items: [
        { title: 'People', href: '/people', current: true },
        { title: 'Approvals', href: '/approvals', description: 'Waiting for you' },
      ],
    },
    {
      label: 'Settings',
      items: [{ title: 'Members', href: '/settings/members' }],
    },
  ]}
/>

Through a router’s link, such as Next’s Link:

import Link from 'next/link';

<SideNav id="app-nav" label="Main" groups={groups} linkAs={Link} />;

Put it in an AppShell to get the mobile menu.

Props

Prop	Type	Default	Notes
`id`	`string`	required	Keys the group headings.
`label`	`string`	required	Names the landmark, such as “Main”.
`groups`	`readonly SideNavGroup[]`	required	`{ label?, items }`. An item is `{ title, href, description?, current? }`.
`linkAs`	`LinkComponent`	`'a'`	Renders each entry’s link, such as Next’s `Link`.
`ref`	`Ref<HTMLElement>`	—	The `<nav>`.
`className`	`string`	—	Placement.
anything else	`<nav>` attributes	—	Except `aria-label`, which `label` sets.

Exported types: SideNavProps, SideNavGroup, SideNavItem.

Accessibility

A <nav> landmark named by label, holding one list for each group.
A labelled group is a list named by its heading; a group without a label has none.
The current page is aria-current="page" and tinted, so it does not depend on colour alone for a screen reader.
Each entry is a link with the kit’s focus ring. A description is read after the title, in the same link.

Without JavaScript

It needs none: links and lists. It holds no state and renders as a Server Component, through a router’s link too. The page says which entry is current.

Theming

muted for the group headings, and the roles of MenuItem: ink, muted, primary-soft for hover and the current entry, and the focus ring.