Breadcrumb

A navigation component for displaying a route trail.

Anatomy

Import and assemble the component:

1import { Breadcrumb } from '@raystack/apsara'
2

3<Breadcrumb>
4  <Breadcrumb.Item />
5  <Breadcrumb.Separator />
6  <Breadcrumb.Item />
7  <Breadcrumb.Ellipsis />
8  <Breadcrumb.Item />
9</Breadcrumb>

API Reference

Root

Groups all parts of the breadcrumb navigation.

Prop

Type

Item

Renders an individual breadcrumb link.

Prop

Type

Separator

Renders a visual divider between breadcrumb items.

Prop

Type

Ellipsis

Renders a collapsed indicator for hidden breadcrumb items.

Prop

Type

Examples

Size

The Breadcrumb component supports different sizes to accommodate various design requirements. Specify the size using the size prop.

1<Flex gap="medium" direction="column">
2  <Breadcrumb size="small">
3    <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
4    <Breadcrumb.Separator />
5    <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
6    <Breadcrumb.Separator />
7    <Breadcrumb.Item href="/products/shoes" current>
8      Shoes
9    </Breadcrumb.Item>
10  </Breadcrumb>
11  <Breadcrumb size="medium">
12    <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
13    <Breadcrumb.Separator />
14    <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
15    <Breadcrumb.Separator />

Separator

Customize the separator between breadcrumb items using the separator prop.

1<Flex gap="medium" direction="column">
2  <Breadcrumb>
3    <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
4    <Breadcrumb.Separator>|</Breadcrumb.Separator>
5    <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
6    <Breadcrumb.Separator>|</Breadcrumb.Separator>
7    <Breadcrumb.Item href="/products/shoes" current>
8      Shoes
9    </Breadcrumb.Item>
10  </Breadcrumb>
11  <Breadcrumb>
12    <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
13    <Breadcrumb.Separator>-</Breadcrumb.Separator>
14    <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
15    <Breadcrumb.Separator>-</Breadcrumb.Separator>

Ellipsis

Use the Breadcrumb.Ellipsis component to truncate the breadcrumb trail when you need to display a large number of items in a limited space.

1<Breadcrumb>
2  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
3  <Breadcrumb.Separator />
4  <Breadcrumb.Ellipsis />
5  <Breadcrumb.Separator />
6  <Breadcrumb.Item href="/products/shoes" current>
7    Shoes
8  </Breadcrumb.Item>
9</Breadcrumb>

Icons

Breadcrumb items can include icons either alongside text or as standalone elements.

1<Breadcrumb>
2  <Breadcrumb.Item href="/" leadingIcon={<>H</>}>
3    Home
4  </Breadcrumb.Item>
5  <Breadcrumb.Separator />
6  <Breadcrumb.Item href="/documents" leadingIcon={<>D</>}>
7    Documents
8  </Breadcrumb.Item>
9  <Breadcrumb.Separator />
10  <Breadcrumb.Item href="/settings" leadingIcon={<>S</>}>
11    Settings
12  </Breadcrumb.Item>
13</Breadcrumb>

Dropdown

Breadcrumb items can include dropdown menus for additional navigation options. Specify the dropdown items using the dropdownItems prop.

Note: When dropdownItems is provided, the as and href props are ignored.

1<Breadcrumb>
2  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
3  <Breadcrumb.Separator />
4  <Breadcrumb.Item href="/category">Category</Breadcrumb.Item>
5  <Breadcrumb.Separator />
6  <Breadcrumb.Item
7    dropdownItems={[
8      {
9        label: "Option 1",
10        onClick: () => {
11          console.log("Option 1");
12        },
13      },
14      {
15        label: "Option 2",

As

Use the as prop to render the breadcrumb item as a custom component. By default, breadcrumb items are rendered as a tags.

When a custom component is provided, the props are merged, with the custom component's props taking precedence over the breadcrumb item's props.

1<Breadcrumb>
2  <Breadcrumb.Item href="/home" as={<NextLink href="/" />}>
3    Home
4  </Breadcrumb.Item>
5  <Breadcrumb.Separator />
6  <Breadcrumb.Item href="/playground" as={<NextLink />}>
7    Playground
8  </Breadcrumb.Item>
9  <Breadcrumb.Separator />
10  <Breadcrumb.Item href="/docs" current>
11    Docs
12  </Breadcrumb.Item>
13</Breadcrumb>

Accessibility

  • Uses nav element with aria-label="Breadcrumb" for proper landmark identification
  • Current page is indicated with aria-current="page"
  • Separator elements are hidden from screen readers with aria-hidden