# NavItem A row in a sidebar. - Group: Navigation - Import: `import { NavItem } from '@misoto22/folio'` - Page: https://ui.misoto22.com/components/nav-item/ - Related: app-shell ## Anatomy - **Row** (required) — An at --control-h-sm with the --radius corner — or, under asChild, the router link you handed it, which receives the classes and aria-current and becomes the row itself. - **Icon** — An optional Remix Icon component at 18px, aria-hidden, ahead of the label. It is rendered by the native branch only: a slotted row takes its icon inside the child, because Slot accepts exactly one. - **Label** (required) — children, and the row’s whole accessible name — the icon contributes nothing to it. - **Active ground** — What active turns on, in one move: a --stone fill, medium weight, and aria-current="page". Three signals, so the current row survives monochrome and low contrast. ## Best practices ### Do - Repeat href on the slotted child: asChild forwards the classes and aria-current and nothing else, so a that does not carry its own href is a row that navigates nowhere. - Put the icon inside the child in asChild mode — the icon prop is silently dropped there, which is how a whole sidebar renders as a column of unlabelled-looking rows. - Derive active from the router’s current path rather than from the last click: it is what writes aria-current="page", so a sidebar tracking its own clicks tells a reader they are on the row they pressed instead of the page they are on. ### Don’t - Do not mark a parent row active to show which section contains the page: active means aria-current="page", and two of them is a reader told they are in two places at once. - Do not tighten the row further: it is --control-h-sm, which is 36px comfortable and 30px under data-density="compact", and a py class below that leaves a column of targets a thumb has to aim at. ## Accessibility - aria-current="page" and not only a colour: the active row is also carried by weight and a filled ground. ## NavItem A row in a sidebar. `aria-current="page"` and not only a colour: the active row has to be identifiable to a reader who cannot see that it is darker. In this system it is also carried by weight and by a filled ground, so it survives monochrome printing and low contrast. Framework-agnostic. `asChild` is how a Next or React Router app gets client-side navigation without this package importing either. ### Props - `href` (required) — `string`. - `icon` — `RemixiconComponentType`. Optional leading icon (a `@remixicon/react` component, rendered at 18px). - `active` — `boolean` default `false`. Marks the current route. Also sets `aria-current="page"`. - `asChild` — `boolean` default `false`. Hand the styling to a router's own `Link` instead of a native ``. The slotted child receives the classes and `aria-current`, and becomes the row — so `icon` is not rendered in this mode; put it inside the child. - `children` (required) — `ReactNode`. - `className` — `string`. Also accepts: `Omit, 'className' | 'children'>`. ## Example — default ```tsx import { NavItem } from '@misoto22/folio' ``` ## Example — one current row ```tsx import { NavItem } from '@misoto22/folio' ``` ## Example — router link ```tsx import { NavItem } from '@misoto22/folio' ```