Breadcrumb

A navigation component for displaying a route trail.

Usage

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

Breadcrumb Props

Prop

Type

Breadcrumb.Item Props

Prop

Type

Breadcrumb.Separator Props

Prop

Type

Breadcrumb.Ellipsis Props

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 />
16    <Breadcrumb.Item href="/products/shoes" current>
17      Shoes
18    </Breadcrumb.Item>
19  </Breadcrumb>
20</Flex>

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>
16    <Breadcrumb.Item href="/products/shoes" current>
17      Shoes
18    </Breadcrumb.Item>
19  </Breadcrumb>
20</Flex>

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",
16        onClick: () => {
17          console.log("Option 2");
18        },
19      },
20    ]}
21  >
22    Subcategory
23  </Breadcrumb.Item>
24  <Breadcrumb.Separator />
25  <Breadcrumb.Item href="/category/subcategory/current">
26    Current Page

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>