Nuxt UI v3 is officially released!

NavigationLinks

A list of links displayed in the NavigationTree.

Usage

This component is used internally by the NavigationTree.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Slots

badge
{ link: NavigationLink; }

Props

ui
DeepPartial<{ wrapper: string; wrapperLevel: string; base: string; active: string; inactive: string; level: string; icon: { base: string; }; badge: { base: string; }; label: string; }>
{}
links
NavigationLink[]
[]
level
number
0

Config

{
  wrapper: 'space-y-3',
  wrapperLevel: 'space-y-1.5',
  base: 'flex items-center gap-1.5 group',
  active: 'text-primary font-medium border-current',
  inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 border-transparent hover:border-gray-500 dark:hover:border-gray-400',
  level: 'border-l -ml-px pl-4',
  icon: {
    base: 'w-5 h-5 flex-shrink-0'
  },
  badge: {
    base: 'rounded-full'
  },
  label: 'text-sm/6 truncate'
}