Breadcrumb

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

Divider

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.

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

Config

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