Components
Nav Pills
Top navigation with a glowing pill that slides to the current page. Works with any router.
Import
import { NavPills, NavPill, NavPillIndicator } from '@rinzai/zen';API reference
<NavPills>
Top navigation on a glass track. Compose what you need: links, and optionally the glowing pill that slides to the current page. It follows whichever link has aria-current="page", so router links that set it themselves (React Router's NavLink) work as-is: <NavPills aria-label="Main"> <NavPillIndicator /> <NavPill href="/month" active>Month</NavPill> <NavPill asChild><NavLink to="/goals">Goals</NavLink></NavPill> </NavPills>
No props of its own; it accepts the props of the element it renders.
<NavPill>
One link in NavPills. `active` marks the current page. With `asChild`, the styles go onto your own link element instead (a router's Link or NavLink).
| Prop | Type | Default |
|---|---|---|
activeThis link is the current page. | boolean | — |
asChildStyle the single child element (e.g. a router link) instead of rendering an <a>. | boolean | — |
<NavPillIndicator>
The glowing pill under the current link. Place it inside NavPills; hidden while no link is current.
| Prop | Type | Default |
|---|---|---|
className | string | — |