NavItem

A link in a settings or section sidebar, with an optional icon and count; the current page is filled brand-subtle at the heavier weight.

Pro
Version 2.0.0-rc.1
APG pattern: Link in a navigation landmark (aria-current="page" on the current one)

Examples

Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.

Default

Profile

Show the code

Default, code

<NavItem href="#profile" icon={User}>Profile</NavItem>

Settings nav

Show the code

Settings nav, code

<nav aria-label="Settings">
  <ul className="flex flex-col gap-0.5">
    <li><NavItem href="#profile" icon={User} isCurrent>Profile</NavItem></li>
    <li><NavItem href="#notifications" icon={Bell} count={3} countLabel="unread">Notifications</NavItem></li>
    <li><NavItem href="#security" icon={Shield}>Security</NavItem></li>
    <li><NavItem href="#billing" icon={CreditCard}>Billing</NavItem></li>
    <li><NavItem href="#team" icon={Users} count={12} countLabel="members">Team</NavItem></li>
  </ul>
</nav>

Tokens

The 14 design tokens NavItem reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 14 tokens

Tokens NavItem reads
Token	Value now	CSS variable
color.bg.brand-subtle	…	`--sd-color-bg-brand-subtle`
color.bg.brand-subtle-hover	…	`--sd-color-bg-brand-subtle-hover`
color.bg.muted	…	`--sd-color-bg-muted`
color.bg.subtle	…	`--sd-color-bg-subtle`
color.icon.brand	…	`--sd-color-icon-brand`
color.icon.default	…	`--sd-color-icon-default`
color.text.default	…	`--sd-color-text-default`
color.text.secondary	…	`--sd-color-text-secondary`
motion.duration.fast	…	`--sd-motion-duration-fast`
motion.easing.standard	…	`--sd-motion-easing-standard`
shape.radius-control	…	`--sd-shape-radius-control`
spacing.gap.sm	…	`--sd-spacing-gap-sm`
spacing.inset.sm	…	`--sd-spacing-inset-sm`
target.min	…	`--sd-target-min`

Install

Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.

Add it from the registry (Pro licence key)

npx shadcn@latest add @superduperui/nav-item

Then import it

import { NavItem } from "@/components/ui/nav-item"

Props

NavItem props
Prop	Type	What it does
`href`required	`string`	Where the link goes.
`children`required	`ReactNode`	The visible label ("Profile").
`icon`	`LucideIcon`	A decorative Lucide icon before the label.
`count`	`string \| number`	A count after the label ("3"), read after it.
`countLabel`	`string`	What the count counts, read after the number by screen readers ("3 unread"). Use it whenever the count is a bare number.
`isCurrent`	`boolean`Default `false`	The page this link points to is the one on screen: aria-current="page", a brand-subtle fill and the heavier weight.

When to use it

Use it for

Settings section navigation
A short list of sections beside a page

Use something else for

App-wide navigation with groups: use Sidebar
Actions: use Button or Menu

Screen readers announce "Notifications 3 unread, link" (the current one adds "current page").

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.4.13, 2.5.5.

Items are 44px in Comfortable and 24px in Compact (AA).

What your product still has to do

Put the items in a list inside a nav landmark with its own label
Give a bare-number count a countLabel ("unread")

This release’s test results

Test results for NavItem in this release
axe-core (WCAG A, AA, AAA and best practice)	60 runs across every story, theme, density and width: 0 violations
Rendered text contrast	140 text runs: 0 below 7:1, lowest 11.42:1
Target size	32 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)	90 focus stops in 3 browser engines: all pass
Keyboard script	Chromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

NavItem keyboard steps
Key	What happens
`Tab`	Tab reaches the first link, the current page
`Tab`	Tab moves to the next link; its count is part of the name
`Tab`	Tab moves on in order
`Shift+Tab`	Shift+Tab moves back

In Figma

The Figma component is NavItem, with Current (False, True); State (Default, Hover, Focus). The Figma library isn’t published yet.

Figma to code: Current (False, True = isCurrent); State (Default, Hover, Focus; preview only); Label → children; Icon → icon when Show icon; Count → count when Show count.