Breadcrumb

Usage

import { Breadcrumb } from '@raystack/apsara'

Prop	Type	Default
`size`	`"small" \| "medium"`	`"medium"`
`className`	`string`	-

Breadcrumb.Item Props

Prop	Type	Default
`label`	`string`	-
`href`	`string`	-
`leadingIcon`	`ReactNode`	-
`current`	`boolean`	`false`
`dropdownItems`	`{ label: string; onClick?: ReactEventHandler<HTMLDivElement> \| undefined; }[]`	-
`as`	`ReactElement<any, string \| JSXElementConstructor<any>>`	`"<a />"`

Breadcrumb.Separator Props

Prop	Type	Default
`children`	`ReactNode`	`"/"`
`className`	`string`	-

Breadcrumb.Ellipsis Props

Prop	Type	Default
`children`	`ReactNode`	`<DotsHorizontalIcon />`
`className`	`string`	-

Examples

Size

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

<Flex gap="medium" direction="column">
  <Breadcrumb size="small">
    <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item href="/products/shoes" current>
      Shoes
    </Breadcrumb.Item>
  </Breadcrumb>
  <Breadcrumb size="medium">
    <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item href="/products/shoes" current>
      Shoes
    </Breadcrumb.Item>
  </Breadcrumb>
</Flex>

Separator

Customize the separator between breadcrumb items using the separator prop.

<Flex gap="medium" direction="column">
  <Breadcrumb>
    <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
    <Breadcrumb.Separator>|</Breadcrumb.Separator>
    <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
    <Breadcrumb.Separator>|</Breadcrumb.Separator>
    <Breadcrumb.Item href="/products/shoes" current>
      Shoes
    </Breadcrumb.Item>
  </Breadcrumb>
  <Breadcrumb>
    <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
    <Breadcrumb.Separator>-</Breadcrumb.Separator>
    <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
    <Breadcrumb.Separator>-</Breadcrumb.Separator>
    <Breadcrumb.Item href="/products/shoes" current>
      Shoes
    </Breadcrumb.Item>
  </Breadcrumb>
</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.

<Breadcrumb>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Ellipsis />
  <Breadcrumb.Separator />
  <Breadcrumb.Item href="/products/shoes" current>
    Shoes
  </Breadcrumb.Item>
</Breadcrumb>

Icons

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

<Breadcrumb>
  <Breadcrumb.Item href="/" leadingIcon={<>H</>}>
    Home
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item href="/documents" leadingIcon={<>D</>}>
    Documents
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item href="/settings" leadingIcon={<>S</>}>
    Settings
  </Breadcrumb.Item>
</Breadcrumb>

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.

<Breadcrumb>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item href="/category">Category</Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item
    dropdownItems={[
      {
        label: "Option 1",
        onClick: () => {
          console.log("Option 1");
        },
      },
      {
        label: "Option 2",
        onClick: () => {
          console.log("Option 2");
        },
      },
    ]}
  >
    Subcategory
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item href="/category/subcategory/current">
    Current Page
  </Breadcrumb.Item>
</Breadcrumb>

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.

<Breadcrumb>
  <Breadcrumb.Item href="/home" as={<NextLink href="/" />}>
    Home
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item href="/playground" as={<NextLink />}>
    Playground
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item href="/docs" current>
    Docs
  </Breadcrumb.Item>
</Breadcrumb>

BreadcrumbupdateUPDATE