Breadcrumbs

showRoot
maxItems
import {Breadcrumbs} from '@gravity-ui/uikit';

Breadcrumbs is a navigation element that shows the current location of a page within a website’s hierarchy. It provides links that allow users to return to higher levels in the hierarchy, making it easier to navigate through a website with multiple layers. Breadcrumbs are especially useful for large websites and applications with hierarchy-based structure of pages.

Example

  1. Region
  2. Country
  3. City
  4. District
  5. Street
<Breadcrumbs>
    <Breadcrumbs.Item>Region</Breadcrumbs.Item>
    <Breadcrumbs.Item>Country</Breadcrumbs.Item>
    <Breadcrumbs.Item>City</Breadcrumbs.Item>
    <Breadcrumbs.Item>District</Breadcrumbs.Item>
    <Breadcrumbs.Item>Street</Breadcrumbs.Item>
</Breadcrumbs>

Events

Use the onAction property as a callback to handle click events on items.

  1. Region
  2. Country
  3. City
  4. District
  5. Street
<Breadcrumbs onAction={(id) => alert(id)}>
    <Breadcrumbs.Item key={1}>Region</Breadcrumbs.Item>
    <Breadcrumbs.Item key={2}>Country</Breadcrumbs.Item>
    <Breadcrumbs.Item key={3}>City</Breadcrumbs.Item>
    <Breadcrumbs.Item key={4}>District</Breadcrumbs.Item>
    <Breadcrumbs.Item key={5}>Street</Breadcrumbs.Item>
</Breadcrumbs>

In Breadcrumbs, clicking an item normally triggers onAction. However, you can also use them as links to other pages or websites. To do that, add the href property to the <Breadcrumbs.Item> component:

<Breadcrumbs>
    <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
    <Breadcrumbs.Item href="/components">Components</Breadcrumbs.Item>
    <Breadcrumbs.Item href="/components/uikit/breadcrumbs">Breadcrumbs</Breadcrumbs.Item>
</Breadcrumbs>

Root context

To help users understand the overall structure, some applications always show the starting point (root item) of the Breadcrumbs, even when other items are hidden due to space limitations.

  1. Home
  2. Trendy
  3. March 2020 Assets
  4. Winter
  5. Holiday
<Box overflow="hidden" width={200}>
    <Breadcrumbs showRoot>
        <Breadcrumbs.Item key="home">Home</Breadcrumbs.Item>
        <Breadcrumbs.Item key="trendy">Trendy</Breadcrumbs.Item>
        <Breadcrumbs.Item key="2020 assets">March 2020 Assets</Breadcrumbs.Item>
        <Breadcrumbs.Item key="winter">Winter</Breadcrumbs.Item>
        <Breadcrumbs.Item key="holiday">Holiday</Breadcrumbs.Item>
    </Breadcrumbs>
</Box>

Separator

  1. Region
  2. Country
  3. City
  4. District
  5. Street
<Breadcrumbs separator=">">
    <Breadcrumbs.Item>Region</Breadcrumbs.Item>
    <Breadcrumbs.Item>Country</Breadcrumbs.Item>
    <Breadcrumbs.Item>City</Breadcrumbs.Item>
    <Breadcrumbs.Item>District</Breadcrumbs.Item>
    <Breadcrumbs.Item>Street</Breadcrumbs.Item>
</Breadcrumbs>
  1. uikit
  2. components
  3. Breadcrumbs
<Breadcrumbs>
  <Breadcrumbs.Item>
    <Flex alignItems="center" gap={1}>
      <House /> uikit
    </Flex>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Flex alignItems="center" gap={1}>
      <Flame /> components
    </Flex>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Flex alignItems="center" gap={1}>
      <Rocket style={{minWidth: 16}} />
      <Text ellipsis variant="inherit">
        Breadcrumbs
      </Text>
    </Flex>
  </Breadcrumbs.Item>
</Breadcrumbs>

Integration with routers

Landmarks

When breadcrumbs are used as a main navigation element for a page, they can be placed in a navigation landmark. Landmarks help the assistive technology users quickly find major sections of a page. To create a navigation landmark, place breadcrumbs inside a <nav> element with an aria-label:

<nav aria-label="Breadcrumbs">
  <Breadcrumbs>
      <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/components">Components</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/components/uikit/breadcrumbs">Breadcrumbs</Breadcrumbs.Item>
  </Breadcrumbs>
</nav>

Disabled items

<Breadcrumbs>
    <Breadcrumbs.Item href="#Region">Region</Breadcrumbs.Item>
    <Breadcrumbs.Item href="#Country" disabled>
        Country
    </Breadcrumbs.Item>
    <Breadcrumbs.Item href="#City">City</Breadcrumbs.Item>
    <Breadcrumbs.Item href="#District">District</Breadcrumbs.Item>
    <Breadcrumbs.Item href="#Street" disabled>
        Street
    </Breadcrumbs.Item>
</Breadcrumbs>

End content

  1. Region
  2. Country
  3. City
  4. District
  5. Street
<Breadcrumbs endContent={<div style={{paddingInlineStart: 4}}><Button>Push</Button></div>}>
    <Breadcrumbs.Item>Region</Breadcrumbs.Item>
    <Breadcrumbs.Item>Country</Breadcrumbs.Item>
    <Breadcrumbs.Item>City</Breadcrumbs.Item>
    <Breadcrumbs.Item>District</Breadcrumbs.Item>
    <Breadcrumbs.Item>Street</Breadcrumbs.Item>
</Breadcrumbs>

Properties

NameDescriptionTypeDefault
childrenBreadcrumb itemsReact.ReactElement<BreadcrumbsItemProps>
disabledDetermines whether Breadcrumbs are disabled.boolean
showRootEnables or disables always showing the root item if the items are collapsed.boolean
popupPlacementStyle of the collapsed item popup.PopupPlacement
popupStyleStyle of the collapsed item popup."staircase"
qadata-qa HTML attribute, used for testingstring
separatorCustom separator node.React.ReactNode"/"
actionclick event handler.(id: Key) => void
idElement's unique ID.string
classNameCSS class name for the element.string
styleSets the inline style for the element.CSSProperties
aria-labelDefines a string value that labels the current element.string
aria-labelledbyIdentifies the element(s) that label the current element.string
aria-describedbyIdentifies the element(s) that describe the object.string
endContentUser's node rendered after last breadcrumb item.React.ReactNode
NameDescriptionTypeDefault
childrenBreadcrumbs content.string
titleString representation of the item contents.string
aria-labelAccessibility label for the item.string
hrefURL to use for the hyperlink.string
targetTarget window for the link.React.HTMLAttributeAnchorTarget
relRelationship between the linked resource and the current page.string
disabledWhether the BreadcrumbsItem is disabled.boolean