Components

Side Nav

Vertical navigation in titled groups, for docs and settings sidebars. Works with any router.

Import

import { SideNav, SideNavGroup, SideNavLink } from '@rinzai/zen';

API reference

<SideNav>

Vertical navigation, e.g. a docs or settings sidebar. Give it an aria-label.

No props of its own; it accepts the props of the element it renders.

<SideNavGroup>

A titled group of links.

PropTypeDefault
className
string—
title
ReactNode—

One link. `active` marks the current page. With `asChild`, the styles go onto your own link element instead (a router's Link or NavLink, which may set aria-current itself).

PropTypeDefault
active

This link is the current page.

boolean—
asChild

Style the single child element (e.g. a router link) instead of rendering an <a>.

boolean—