HorizontalNavigation

Usage

Pass an array to the links prop of the HorizontalNavigation 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, they will be displayed apart thanks to a justify-between flexbox layout.

You can do this by passing an array of arrays to the links prop of the HorizontalNavigation 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.

`icon`

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

`badge`

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

{ wrapper?: string; container?: string; inner?: string; base?: string; before?: string; after?: 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>; } & { [key: string]: any; } & { strategy?: Strategy; }

{}

links

HorizontalNavigationLink[] | HorizontalNavigationLink[][]

[]

Config

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

FormGroup

Display a label and additional informations around a form element.

Icon

Add 200,000+ ready to use icons to your Nuxt application, based on Iconify.