PillNav
since v0.4.0Pill-shaped horizontal navigation strip — used for in-page section navigation.
Forwards ref to the outer hairline-ring <div>.
Install
Add the package and import the component.
pnpm add @hey-mike/tungstenpnpm add @hey-mike/tungstenimport { PillNav } from '@hey-mike/tungsten';import { PillNav } from '@hey-mike/tungsten';Preview
Same fixtures used by the visual-regression suite.
Usage
apps/docs/app/snapshots/pill-nav/page.tsx
import { PillNav } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';
export default function PillNavSnapshot() {
return (
<VariantGrid
title="PillNav"
variants={[
{
label: 'default',
node: (
<PillNav
items={[
{ id: 'home', label: 'Home', href: '#' },
{ id: 'settings', label: 'Settings', href: '#' },
{ id: 'about', label: 'About', href: '#' },
]}
activeId="settings"
/>
),
},
]}
/>
);
}
import { PillNav } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';
export default function PillNavSnapshot() {
return (
<VariantGrid
title="PillNav"
variants={[
{
label: 'default',
node: (
<PillNav
items={[
{ id: 'home', label: 'Home', href: '#' },
{ id: 'settings', label: 'Settings', href: '#' },
{ id: 'about', label: 'About', href: '#' },
]}
activeId="settings"
/>
),
},
]}
/>
);
}
Props
Surface specific to <PillNav />.
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | NavItemSpec[] | — | — |
| activeId | string | — | — |
| ariaLabel | string | Navigation | — |
| className | string | — | — |
| linkComponent | ElementType | — | Element used to render link items (those with href). Defaults to 'a'.
Pass a router link (e.g. Next.js <Link>) for client-side navigation.
Action items (those with onClick) always render a <button>. |