Skip to main content
MACAW

SideNav

Organismbeta@macaw-ds/ui · since 0.1.0

The product's primary navigation in the left column of AppShell. Not for sections within a page; that is TabNav.

Open gallery

Groups of links with optional headings and icons. One item is active and carries aria-current="page". Item height follows the density mode. AppShell gives it a full-height, independently scrolling column on surface layer-1.

Playground

Controls are generated from the manifest; the snippet is what the CLI prints. Show focus and Reduced motion appear only when they apply.

Frame theme

What moves: Item background and text colour ease on hover. Hover transitions are 100 ms, so the difference is subtle by design.

Examples
import { SideNav } from '@macaw-ds/ui';

<SideNav aria-label="Main">
  <SideNav.Group title="Billing">
    <SideNav.Item asChild>
      <Link href="/invoices">Invoices</Link>
    </SideNav.Item>
    <SideNav.Item asChild>
      <Link href="/customers">Customers</Link>
    </SideNav.Item>
  </SideNav.Group>
</SideNav>

Controls

Names the navigation landmark, e.g. "Main".

On SideNav.Item: the current page.

Examples

The named exports of the examples file, rendered as they ship.