Nav MenuNew

A vertical navigation list with two-layer proximity highlight (active route + hover), weight-shift labels, and status dots for new/updated items.

Dependencies

motion

Interaction Type

Hover or use arrow keys to navigate links. Active route gets a persistent accent-tinted highlight. Labels weight-shift on hover.

Props

Options you can pass to customize this component.

Prop

Type

Description

activeSlug*

string | null

The current route path. Required — the router owns truth.

aria-label

string

Accessible label for the nav. Defaults to "Main".

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/nav-menu.json

How to use

<NavMenu activeSlug={pathname} aria-label="Docs">
  <NavMenuItem href="/docs" label="Overview" />
  <NavMenuItem href="/docs/install" label="Install" isNew />
  <NavMenuItem href="/docs/theming" label="Theming" isUpdated />
</NavMenu>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

•Free for personal and commercial use
•No attribution required
•Cannot be resold as a standalone product
•Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use

// No code loaded.

npx shadcn@latest addhttps://ui.nexvyn.dev/r/nav-menu.json