Breadcrumbs

Breadcrumbs is a simple navigation component for displaying a trail of links or steps. Use Crumb components as children for each navigation level.

Basic Usage

Code Example
Basic.vue

Components

The Breadcrumbs components include the following:

  • Breadcrumbs - The root wrapper for breadcrumb navigation.
  • Crumb - Represents a single breadcrumb item.

The Breadcrumbs component wraps Crumb components, displaying them in a horizontal navigation bar. It accepts no props.

Breadcrumbs Slots Description
default

The default slot. Place one or more Crumb components as children.

Crumb

The Crumb component represents a single item in the breadcrumb navigation. It accepts any content, including text, links, or icons. It accepts no props.

Crumb Slots Description
default

The content of the breadcrumb item (text, link, icon, etc).

Examples

Basic Breadcrumbs

A simple breadcrumbs navigation with three levels.

Code Example
Basic.vue

Breadcrumbs where each Crumb can contain icons or custom content.

Code Example
WithIcons.vue