Breadcrumb

Overview

Breadcrumb shows the user's position in a page hierarchy and lets them navigate back to parent pages.

Usage

<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Current</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Accessibility

• <nav> with aria-label="Breadcrumb"
• <ol> ordered list for hierarchy
• aria-current="page" on current page
• Separators are aria-hidden="true"

API Reference

Related Components

• Tabs — Horizontal nav within a page
• Link — Individual nav link