Nav

Navigation primitives for building sidebars and menus.

NavItem basic

A standalone navigation item rendered as a <button> by default.

<NavItem label="Dashboard" />

NavItem with icon

Pass any React node to icon to render it to the left of the label.

<NavItem
label="Settings"
icon={<svg …>…</svg>}
/>

NavItem active

Set active to apply the highlighted style indicating the current page.

<NavItem label="Dashboard" />
<NavItem label="Components" active />
<NavItem label="Patterns" />

NavItem disabled

Set disabled to prevent interaction and apply muted styles.

<NavItem label="Available" />
<NavItem label="Coming soon" disabled />

NavItem as link

Provide href to render an <a> tag instead of a <button>.

Documentation

<NavItem label="Documentation" href="/docs" />

NavGroup

NavGroup renders a labelled section heading above its NavItem children.

Getting Started

Introduction Installation

<NavGroup label="Getting Started">
<NavItem label="Introduction" href="/docs/getting-started/introduction" />
<NavItem label="Installation" href="/docs/getting-started/installation" />
</NavGroup>

NavGroup collapsible

Set collapsible to allow the group to be toggled open or closed. Use defaultCollapsed to start collapsed.

Button Card Badge

<NavGroup label="Components" collapsible>
<NavItem label="Button" href="/docs/components/button" />
<NavItem label="Card" href="/docs/components/card" />
<NavItem label="Badge" href="/docs/components/badge" />
</NavGroup>

// Start collapsed:
<NavGroup label="Components" collapsible defaultCollapsed>
…
</NavGroup>

Props

NavItem

Prop	Type	Default	Description
`label`	`string`	—	Text label for the nav item
`icon`	`ReactNode`	—	Icon rendered to the left of the label
`href`	`string`	—	Renders as <a> when provided, otherwise <button>
`active`	`boolean`	`false`	Applies highlighted styles for the current page
`disabled`	`boolean`	`false`	Prevents interaction and applies muted styles
`onClick`	`MouseEventHandler`	—	Click handler

NavGroup

Prop	Type	Default	Description
`label`	`string`	—	Section heading text
`collapsible`	`boolean`	`false`	Allows the group to be toggled open or closed
`defaultCollapsed`	`boolean`	`false`	When collapsible, starts the group in a collapsed state
`children`	`ReactNode`	—	NavItem elements