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. Ref is forwarded to the rendered element when using render (not when using dropdownItems).

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 render 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",

Render

Use the render prop to render the breadcrumb item as a custom component. Pass a JSX element (e.g. render={<NextLink />}) and we will replace the default <a> while merging props. By default, items render as a tags.

1// Correct: set href on the item (it will be forwarded into the rendered element)
2<Breadcrumb.Item href="/" render={<NextLink />}>Home</Breadcrumb.Item>
1<Breadcrumb>
2  <Breadcrumb.Item href="/" render={<NextLink />}>
3    Home
4  </Breadcrumb.Item>
5  <Breadcrumb.Separator />
6  <Breadcrumb.Item href="/playground" render={<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