VerticalNavigation

Usage

Pass an array to the links prop of the VerticalNavigation component. Each link can have the following properties:

label - The label of the link.
labelClass - The class of the link label.
icon - The icon of the link.
iconClass - The class of the link icon.
avatar - The avatar of the link. You can pass all the props of the Avatar component.
badge - A badge to display next to the label. You can pass all the props of the Badge component.
click - The click handler of the link.

You can also pass any property from the NuxtLink component such as to, exact, etc.

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

Sections

Group your navigation links into distinct sections, separated by a divider. You can do this by passing an array of arrays to the links prop of the VerticalNavigation component.

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

Slots

You can use slots to customize links display.

`default`

Use the #default slot to customize the link label. You will have access to the link and isActive properties in the slot scope.

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

`avatar`

Use the #avatar slot to customize the link avatar. You will have access to the link and isActive properties in the slot scope.

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

`icon`

Use the #icon slot to customize the link icon. You will have access to the link and isActive properties in the slot scope.

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

`badge`

Use the #badge slot to customize the link badge. You will have access to the link and isActive properties in the slot scope.

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

{ wrapper?: string; base?: string; ring?: string; padding?: string; width?: string; rounded?: string; font?: string; size?: string; active?: string; inactive?: string; label?: string; icon?: DeepPartial<{ base: string; active: string; inactive: string; }, any>; avatar?: DeepPartial<{ base: string; size: AvatarSize; }, any>; badge?: DeepPartial<{ base: string; color: BadgeColor; variant: BadgeVariant; size: BadgeSize; }, any>; divider?: DeepPartial<{ wrapper: { base: string; }; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }

{}

links

VerticalNavigationLink[] | VerticalNavigationLink[][]

[]

Config

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

Example

Here is an example illustrating how you can customize the appearance of the VerticalNavigation component by utilizing its ui prop.

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

Tooltip

Display content that appears on hover next to an element.

Nuxt UI Pro

A collection of premium Vue components to create beautiful & responsive Nuxt applications in minutes.