Skip to main content

Breadcrumb

Navigation
Stable

Navigation breadcrumbs showing the current page location with RTL-aware separators and ellipsis for collapsed paths.

Quick Import
Full Documentation
import { Breadcrumb } from "@cohere-ai/waypoint-ui/breadcrumb";

Live Preview

Loading Breadcrumb...
Open in StorybookOpen in v0View Docs

Props

NameTypeDefaultDescription
asChild (BreadcrumbLink)booleanfalseRender as child element (use with <a> or router Link)

Examples

Basic Breadcrumb

Three-level navigation breadcrumb

1
import {
2
  Breadcrumb, BreadcrumbList, BreadcrumbItem,
3
  BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
4
} from '@cohere-ai/waypoint-ui/breadcrumb';
5
 
6
<Breadcrumb>
7
  <BreadcrumbList>
8
    <BreadcrumbItem>
9
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
10
    </BreadcrumbItem>
11
    <BreadcrumbSeparator />
12
    <BreadcrumbItem>
13
      <BreadcrumbLink href="/settings">Settings</BreadcrumbLink>
14
    </BreadcrumbItem>
15
    <BreadcrumbSeparator />
16
    <BreadcrumbItem>
17
      <BreadcrumbPage>Profile</BreadcrumbPage>
18
    </BreadcrumbItem>
19
  </BreadcrumbList>
20
</Breadcrumb>

Accessibility

WCAG AA

Note: Wrapped in <nav> with aria-label from useUiLabels. Current page marked with aria-current="page". RTL-aware separator direction.

Found an Issue?

If you've encountered a bug or have feedback about the Breadcrumb component, please report it to our team. Your feedback helps us improve Waypoint.

Available for all users • Issue will be created in Linear

Was this page helpful?

Your feedback helps us improve our documentation.

Need Help?

Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.