ui/docs/content/2.components/breadcrumb.md

title, description, links

title	description	links
Breadcrumb	A list of links that indicate the current page's location within a navigational hierarchy.	label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/blob/v2/src/runtime/components/navigation/Breadcrumb.vue

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.

:component-example{component="breadcrumb-example-basic"}

::callout{icon="i-heroicons-light-bulb"} A span will be rendered instead of a link when the to property is not defined. ::

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.

::component-card

baseProps: links: - label: Home to: / - label: Navigation - label: Breadcrumb props: divider: '/'

::

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.

:component-example{component="breadcrumb-example-default-slot"}

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.

:component-example{component="breadcrumb-example-icon-slot"}

divider

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

:component-example{component="breadcrumb-example-divider-slot"}

Props

:component-props

Config

:component-preset