NAVIGATION

NavItem

Sidebar-row primitive used by the Damo UI docs nav and any sidebar that needs the unified selection chrome (gradient + 1px inset outline + 3px accent bar). Polymorphic by default via as.

Import

import { NavItem } from 'damo-ui'

Basic list

1<NavItem href="/dashboard">Dashboard</NavItem>
2<NavItem href="/inbox" active>
3  Inbox
4</NavItem>
5<NavItem href="/settings">Settings</NavItem>

With icons + adornment

1<NavItem icon={<CogIcon size={16} />} href="/settings">
2  Settings
3</NavItem>

Polymorphic — render as Link

Pass any element via as. NavItem forwards aria-current when active is true regardless of the rendered tag.

1import Link from 'next/link'
2
3<NavItem as={Link} href="/inbox" active>
4  Inbox
5</NavItem>

Props

NavItem props
PropTypeDefaultDescription
asElementType'a'Polymorphic element. Pass Link, button, or any component to control routing semantics.
activeboolean—When true, applies the selection chrome (gradient + outline + accent bar) and sets aria-current="page".
iconReactNode—Optional leading icon rendered inside a 20×20 slot.
endAdornmentReactNode—Optional trailing element — typically a Badge marking new / beta / count.
tone'default' | 'onDark''default'default is the standard light/dark sidebar tone; onDark swaps the muted text and selection colors to the on-dark navbar palette (used inside AppTopBar).
childrenReactNode—Item label.

Accessibility

  • When active is set, NavItem applies aria-current="page" — the canonical signal for "you are here" in a navigation list.
  • Default render is <a>; for client-side routing pass as={Link} (Next) or your router's link component. The selection chrome and class merging are preserved.
← ContextMenuBreadcrumbs →