Navigation

A familiar path through every workspace.

Component

Neutral navigation items with badges and expandable groups.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { NavItem } from '@vrum/ui';
import { Home } from 'lucide-react';

<NavItem
  label={"Projects"}
  active={true}
  variant={"neutral"}
  badge={"8"}
  expandable={false}
  defaultExpanded={false}
  icon={<Home size={18} />}
/>

NavItem props

Prop	Type	Default	Description
`icon`	`React.ReactNode \| LucideIcon`	none	icon configuration.
`label*`	`string`	none	Navigation label.
`href`	`string`	none	href configuration.
`active`	`boolean`	none	Mark the current destination.
`variant`	`"default" \| "neutral"`	`"neutral"`	Neutral or blue-accent appearance.
`badge`	`React.ReactNode`	none	Optional count or status.
`expandable`	`boolean`	none	Show an expandable group.
`expanded`	`boolean`	none	expanded configuration.
`defaultExpanded`	`boolean`	`false`	Initial expanded state.
`onClick`	`(() => void)`	none	Called when the control is activated.
`children`	`React.ReactNode`	none	Content rendered inside the component.
`className`	`string`	none	Additional CSS classes.

Navigation

Interactive playground

Props

NavItem props