Navigation menu: Current page
Links in the bar look like triggers. Mark the current page with active, which also sets aria-current="page".
This adds the example as components/examples/navigation-menu/active.tsx, together with the Navigation menu component and the HextaUI theme tokens it needs.
pnpm dlx shadcn@latest add https://hextaui.com/r/navigation-menu-active.jsonTo add only the component, follow the Navigation menu installation.
Props in this example
The Navigation menu props this example sets, from the API reference.
| Prop | Type | Default |
|---|---|---|
activeMarks the current page. | boolean | false |
Every prop is in the Navigation menu API reference.
See them all, with keyboard support and accessibility notes, on the Navigation menu page.
- MotionThe easing curves, durations and reduced-motion check every component animates with, plus hooks for size morphs and sliding highlights.
- BreadcrumbA trail of links to the current page that wraps safely, mirrors in right-to-left layouts and expands collapsed segments in place.
- PaginationPage navigation that keeps every button in place, glides to the current page and jumps to any page from the ellipsis.
- SidebarAn app sidebar that collapses to icons or off canvas, stays pinned under your header, and becomes a swipeable sheet on phones.
- TabsSwitch between views with an indicator that slides to the active tab, as a segmented control or an underline, and lists that scroll when they overflow.