/
Getting Started
Overview
Design Tokens
Overview
Color
Typography
Unit
Radius
Shadow
Viewport
Components
Accordion
Alert
Avatar
Badge
Breadcrumbs
Button
Card
Carousel
Checkbox
Divider
Dropdown menu
Link
Loader
Menu item
Modal
Overlay
Popover
Progress
Radio
Select
Switch
Tabs
Text Area
Text Field
Toast
Tooltip
Utilities
Action Bar
Actionable
Aspect ratio
Backdrop
Container
Dismissible
Form control
Hidden
Hidden visually
Icon
Image
Text
Theme provider
View
Hooks
useElementId
useFormControl
useRTL
useScrollLock
useTheme
useToggle

Breadcrumbs

Top-level product navigation that helps user understand the location of the current page and navigate back to its parents.
Import
import { Breadcrumbs } from "@uicapsule/components";
import type { BreadcrumbsProps } from "@uicapsule/components";
Related components
Link
Tabs
Storybook
Breadcrumbs stories
Custom item and separator rendering
Supports item collapsing


Usage

Breadcrumbs render all of the Breadcrumbs.Item passed to it and separates them with chevron icons. Breadcrumbs.Item that has no onClick or href passed to it is rendered as an active item which represents the current page.

<Breadcrumbs>

  <Breadcrumbs.Item onClick={() => {}}>Catalog</Breadcrumbs.Item>

  <Breadcrumbs.Item onClick={() => {}}>Shoes</Breadcrumbs.Item>

  <Breadcrumbs.Item onClick={() => {}}>Running</Breadcrumbs.Item>

  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>

</Breadcrumbs>

Breadcrumbs can be rendered using primary color for the clickable items:

<Breadcrumbs color="primary">

  <Breadcrumbs.Item onClick={() => {}}>Catalog</Breadcrumbs.Item>

  <Breadcrumbs.Item onClick={() => {}}>Shoes</Breadcrumbs.Item>

  <Breadcrumbs.Item onClick={() => {}}>Running</Breadcrumbs.Item>

  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>

</Breadcrumbs>

Every item supports rendering an icon and its user interaction can be disabled:

<Breadcrumbs color="primary">

  <Breadcrumbs.Item onClick={() => {}} icon={IconZap}>

    Catalog

  </Breadcrumbs.Item>

  <Breadcrumbs.Item disabled>Shoes</Breadcrumbs.Item>

  <Breadcrumbs.Item onClick={() => {}}>Running</Breadcrumbs.Item>

  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>

</Breadcrumbs>

In case Breadcrumbs have too many items displayed, you can collapse certain amount of them using defaultVisibleItems property. For example, showing 3 visible items will show the first and the last two items in the list with an expand button in between. Clicking on thab button will expand all the items back to the default state.

<Breadcrumbs defaultVisibleItems={2}>

  <Breadcrumbs.Item onClick={() => {}}>Catalog</Breadcrumbs.Item>

  <Breadcrumbs.Item onClick={() => {}}>Shoes</Breadcrumbs.Item>

  <Breadcrumbs.Item onClick={() => {}}>Running</Breadcrumbs.Item>

  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>

</Breadcrumbs>

Using with router

You can use Breadcrumbs.Item together with all popular router solutions by wrapping them in the used router Link component:

<Breadcrumbs>

  <RouterLink href="/">

    <Breadcrumbs.Item>Catalog</Breadcrumbs.Item>

  </RouterLink>

  <RouterLink href="/shoes">

    <Breadcrumbs.Item>Shoes</Breadcrumbs.Item>

  </RouterLink>

  <RouterLink href="/shoes/running">

    <Breadcrumbs.Item>Running</Breadcrumbs.Item>

  </RouterLink>

  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>

</Breadcrumbs>

Custom components

Separator icon can be replaced with a custom element. For example, you can use / or - text elements:

<Breadcrumbs separator="/">

  <Breadcrumbs.Item onClick={() => {}}>Catalog</Breadcrumbs.Item>

  <Breadcrumbs.Item onClick={() => {}}>Shoes</Breadcrumbs.Item>

  <Breadcrumbs.Item onClick={() => {}}>Running</Breadcrumbs.Item>

  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>

</Breadcrumbs>

Every item can contain custom components instead of regular link:

<Breadcrumbs>

  <Breadcrumbs.Item onClick={() => {}}>

    <Badge>Catalog</Badge>

  </Breadcrumbs.Item>

  <Breadcrumbs.Item onClick={() => {}}>

    <Badge>Shoes</Badge>

  </Breadcrumbs.Item>

  <Breadcrumbs.Item onClick={() => {}}>

    <Badge>Running</Badge>

  </Breadcrumbs.Item>

  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>

</Breadcrumbs>

Accessibility

  • It's recommended to pass attributes.ariaLabel to Breadcrumbs to provide more context around the role of the breadcrumbs on the page
Previous
Badge
Next
Button