NavItem
A native destination link with explicit current-page presentation inside NavList.@gemologic/sheen · navigationPlayground
This example has no scalar controls. Its validated source remains interactive below.
<NavList label="Workspace"><NavItem href="/overview" label="Overview" current /></NavList>Variant matrix
Current destination
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/NavList.tsx- Tokens
--sheen-color-fg--sheen-color-bg-hover--sheen-color-focus-ring
Accessibility
Role: link, listitemKeyboard: Tab, Shift+Tab, Enter, Space, EscapeDo
- Let the app/router determine the current page.
- Keep identities stable when labels refresh.
- Render optional row actions as sibling controls through actions.
Do not
- Do not use the destination itself for an action or nest interactive controls in icon and badge slots.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
href * | string | — | Required destination URL; browser navigation and modified clicks remain native. |
label * | string | — | Required visible destination label. |
current | boolean | false | App-owned current-page state, exposed through aria-current. |
icon | JSX.Element | — | Optional decorative, noninteractive icon. The visible label supplies its accessible meaning. |
badge | JSX.Element | — | Optional noninteractive status/count content, included in the link's accessible name. Localize counts in the app. |
tooltip | string | — | Optional contextual help, requiring ThemeProvider. Keep supplied and toggle tooltipDisabled to retain the anchor across presentation changes. |
tooltipDisabled | boolean | — | Disables supplied tooltip help without disabling or replacing the link. |
actions | JSX.Element | — | Optional sibling controls rendered beside the link. Use for row actions that must not be nested inside the destination. |