Breadcrumb - Nuxt UI

Usage

Pass an array to the links prop of the Breadcrumb 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.

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"
}

A span will be rendered instead of a link when the to property is not defined.

Use the divider prop to customize the divider between each link, it can be an icon or a string. You can change it globally in ui.breadcrumb.default.divider. Defaults to i-heroicons-chevron-right-20-solid.

You can set the prop to null to hide the divider. Additionally, you can customize it using the divider slot.

divider

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

Slots

`default`

Use the #default slot to customize the link label. You will have access to the link, index 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, index and isActive properties in the slot scope.

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

`divider`

Use the divider slot to customize the divider of the Breadcrumb.

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

Props

{ wrapper?: string; ol?: string; li?: string; base?: string; label?: string; icon?: DeepPartial<{ base: string; active: string; inactive: string; }, any>; divider?: DeepPartial<{ base: string; }, any>; active?: string; inactive?: string; default?: DeepPartial<{ divider: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }

{}

divider

string

config.default.divider

links

BreadcrumbLink[]

[]

Config

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

Badge

Display a short text to represent a status or a category.

Button

Create a button with icon or link capabilities.