Components/Navigation/NavLink

NavLink

Navigation

Sidebar navigation item with active state, icons, and nesting.

Single navigation entry for sidebar menus. Active state shows a Neo Green left border. Supports a right-section slot for badges or counts. Children can be revealed via a toggle chevron.

Usage

import { NavLink } from "nosible-ux"
import { BarChart2 } from "lucide-react"

export default function Example() {
  return (
    <NavLink leftSection={<BarChart2 size={16} />} active>
      Signals
    </NavLink>
  )
}

Examples

With nested items

Regions

Markets

Americas

Europe

Asia-Pacific

Reports

Accessibility

Active item communicates state visually (Neo Green border + text). Use aria-current="page" on the active link when using asChild with a router link.

Props

Name	Type	Default	Description
`active`	`boolean \| undefined`	—	Marks this item as the current route — applies accent colouring and sets `aria-current="page"` unless overridden.
`asChild`	`boolean \| undefined`	—	When true, merges props onto the child element (e.g. a router `<Link>`). Useful to preserve router awareness while receiving NavLink styling.
`children`	`ReactNode`	—	Collapsible nested children. Visible when `open` is true. Renders `aria-expanded` on the root element automatically.
`defaultOpen`	`boolean \| undefined`	`false`	Uncontrolled initial open state.
`leftSection`	`ReactNode`	—	Icon or element shown to the left of the label.
`nestedChildren`	`ReactNode`	—	Nested child nav items rendered below the trigger when open.
`onOpenChange`	`((open: boolean) => void) \| undefined`	—	Callback when the collapse toggle is clicked.
`open`	`boolean \| undefined`	—	Controlled open state for collapsible nested items.
`rightSection`	`ReactNode`	—	Badge, arrow, or any element shown on the far right.

← All Components Getting Started →