Breadcrumb

Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.

Playground

Experiment with the Breadcrumb component by adjusting the props below:

Interactive Playground

Controls

Divider Style

Number of Items

Count: 3

Active Item

Preview

Code

            
            <Breadcrumb.Root>
  <Breadcrumb.Item href="#!">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="#!">Library</Breadcrumb.Item>
  <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
</Breadcrumb.Root>

Basic Example

Use a breadcrumb to indicate the hierarchical navigation structure for the current page. Breadcrumbs automatically add visual separators via CSS, with the active item (usually the current page) being visually distinct and non-linkable.

            
            <Breadcrumb.Root>
    <Breadcrumb.Item href="#!">Home</Breadcrumb.Item>
    <Breadcrumb.Item href="#!">Library</Breadcrumb.Item>
    <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
</Breadcrumb.Root>

Custom Dividers

Breadcrumb dividers are created using CSS through the ::before pseudo-element and content property. You can modify the divider by changing the divider prop, which sets the CSS custom property --bs-breadcrumb-divider. You can use a string character like > or even an SVG embedded as a data URI.

Using character divider

Using SVG divider

            
            <!-- Using character divider -->
<Breadcrumb.Root divider=">">
    <Breadcrumb.Item href="#!">Home</Breadcrumb.Item>
    <Breadcrumb.Item href="#!">Library</Breadcrumb.Item>
    <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
</Breadcrumb.Root>

<!-- Using SVG divider -->
<Breadcrumb.Root divider="url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E)">
    <Breadcrumb.Item href="#!">Home</Breadcrumb.Item>
    <Breadcrumb.Item href="#!">Library</Breadcrumb.Item>
    <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
</Breadcrumb.Root>

No Divider

You can also remove the divider by setting divider="" (an empty string).

            
            <!-- No divider -->
<Breadcrumb.Root divider="">
    <Breadcrumb.Item href="#!">Home</Breadcrumb.Item>
    <Breadcrumb.Item href="#!">Library</Breadcrumb.Item>
    <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
</Breadcrumb.Root>

Accessibility

Since breadcrumbs provide a navigation, it's good practice to add a meaningful label such as ariaLabel="breadcrumb navigation" to describe the type of navigation provided in the <nav> element. The Breadcrumb component automatically applies an aria-current="page" to the last item of the set to indicate that it represents the current page.

            
            <Breadcrumb.Root ariaLabel="breadcrumb navigation">
    <Breadcrumb.Item href="#!">Home</Breadcrumb.Item>
    <Breadcrumb.Item href="#!">Library</Breadcrumb.Item>
    <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
</Breadcrumb.Root>

API Reference

Breadcrumb.Root Props

Name	Type	Default	Description
`ariaLabel`	`string`	`'breadcrumb'`	ARIA label for the breadcrumb navigation.
`class`	`string`	`undefined`	Additional CSS classes to apply to the component.
`divider`	`string`	`undefined`	Custom divider to use between breadcrumb items.
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element.
`id`	`string`	`breadcrumb-{uid}`	Unique ID for the breadcrumb element.

Breadcrumb.Item Props

Name	Type	Default	Description
`class`	`string`	`undefined`	Additional CSS classes to apply to the component.
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element.
`href`	`string`	`'#!'`	URL for the breadcrumb item.
`id`	`string`	`breadcrumb-item-{uid}`	Unique ID for the breadcrumb item element.
`isActive`	`boolean`	`false`	Whether the breadcrumb item is active (current page).

CSS Classes

The component applies Bootstrap's breadcrumb classes based on the provided props:

breadcrumb - Base class for the Breadcrumb component
breadcrumb-item - Applied to Breadcrumb.Item components
active - Applied to Breadcrumb.Item when isActive=true

CSS Variables

The Breadcrumb component uses the following CSS variables:

--bs-breadcrumb-divider - Controls the divider character or content. Default is /
--bs-breadcrumb-item-padding-x - Controls the horizontal padding of breadcrumb items
--bs-breadcrumb-margin-bottom - Controls the margin at the bottom of the breadcrumb