Breadcrumb

Shows the current page's place within a hierarchy of navigable links.

Installation

bunx @swift-rust/ui add breadcrumb

Usage

tsx

1import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
2 
3<Breadcrumb>
4  <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
5  <BreadcrumbSeparator />
6  <BreadcrumbItem><BreadcrumbLink href="/docs">Docs</BreadcrumbLink></BreadcrumbItem>
7  <BreadcrumbSeparator />
8  <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
9</Breadcrumb>

Composition

Breadcrumb is composed of these parts:

Breadcrumb
├── BreadcrumbItem
│   └── BreadcrumbLink
├── BreadcrumbSeparator
└── BreadcrumbItem
    └── BreadcrumbPage

Examples

← Badge Button →