Breadcrumb

Path-based navigation showing where the user is in a hierarchy. Compose with BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, and BreadcrumbSeparator.

Basic

Linked path segments with the current page as plain text.

Usage

Import the parts you need from the component's folder.

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from "@/components/ui/breadcrumb";

Custom separator

Override the BreadcrumbSeparator slot to use any icon.

Ellipsis

Collapse the middle of a long path with BreadcrumbEllipsis.

As child link

Render BreadcrumbLink into a custom element with as-child.

API Reference

BreadcrumbLink

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render into the child element. Use to wrap a NuxtLink.

BreadcrumbSeparator / BreadcrumbEllipsis

Prop	Type	Default	Description
`class`	`string`	—	Override the default chevron or dots.

Slot	Description
`default`	Replace the built-in separator icon (chevron) or ellipsis with custom content.

Bottom Nav Header Menu