Preview

Installation

npx sigma-ui@latest add breadcrumb

Usage

<script setup lang="ts">
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">
          Home
        </BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="/components">
          Components
        </BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>

Use <BreadcrumbPage> for the current page and <BreadcrumbLink> for the other items.

Examples

Custom separator

Use a custom component as slot for <BreadcrumbSeparator /> to create a custom separator.

Dynamic rendering

Example of rendering items dynamically.

Dynamic rendering with ellipsis

Example of rendering items dynamically with ellipsis.

Dropdown

You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.

Collapsed

Use <BreadcrumbEllipsis /> component to show collapsed state when the breadcrumb is too long.

Link component

To use a custom link component from your routing library, you can use the asChild prop on <BreadcrumbLink /> - this will flatten the components and prevent creating a link inside of a link.

Responsive

Here's an example of a responsive breadcrumb that composes <BreadcrumbItem /> with <BreadcrumbEllipsis />, <DropdownMenu />, and <Drawer />.

It displays a dropdown on desktop and a drawer on mobile.

Breadcrumb generator

<BreadcrumbGenerator /> is an alternative way of using the breadcrumb component. Pass a home item and a model array of items. It provides less customization but is easier to use.

For this example to work, make sure to specify route url: and route name: values that are actually defined in your router.

API Reference

Breadcrumb

Props

Prop	Type	Default
ariaLabel	string	"breadcrumb"

Slots

Slot	Scope
default The content of the component.	-

BreadcrumbEllipsis

Props

Prop	Type	Default
label	string	"More"

Slots

Slot	Scope
default The content of the component.	-

BreadcrumbItem

Slots

Slot	Scope
default The content of the component.	-

BreadcrumbLink

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"a"

Slots

Slot	Scope
default The content of the component.	-

BreadcrumbList

Slots

Slot	Scope
default The content of the component.	-

BreadcrumbPage

Slots

Slot	Scope
default The content of the component.	-

BreadcrumbSeparator

Slots

Slot	Scope
default The content of the component.	-

BreadcrumbGenerator

Props

Prop	Type	Default
home Item rendered first, before the model items.	BreadcrumbItem	-
model Items to render in order; the last one is marked as the current page.	BreadcrumbItem[]	-

Slots

Slot	Scope
home Replaces the rendering of the home item.	{ item: BreadcrumbItem; props: { action: ActionProps; }; }
separator Replaces the chevron icon between items.	-
item Replaces the rendering of each model item.	{ item: BreadcrumbItem; props: { action: ActionProps; }; }

Accessibility

Follows the Breadcrumb WAI-ARIA design pattern: it renders a nav landmark with aria-label="breadcrumb", an ordered list of links, and marks the current page with aria-current="page".

Key	Description
Tab	Moves focus to the next link in the breadcrumb.
Shift + Tab	Moves focus to the previous link in the breadcrumb.
Enter	Follows the focused link.