Breadcrumbs
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
- Region/
- Country/
- City/
- District/
- 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.
- Region/
- Country/
- City/
- District/
- 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>
§Links
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.
- Home/
- Trendy/
- March 2020 Assets/
- Winter/
- 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
- Region>
- Country>
- City>
- District>
- 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>
§Breadcrumbs with icons
uikit/ components/ 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
- Region/
- Country/
- City/
- District/
- 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
Name | Description | Type | Default |
---|---|---|---|
children | Breadcrumb items | React.ReactElement<BreadcrumbsItemProps> | |
disabled | Determines whether Breadcrumbs are disabled. | boolean | |
showRoot | Enables or disables always showing the root item if the items are collapsed. | boolean | |
popupPlacement | Style of the collapsed item popup. | PopupPlacement | |
popupStyle | Style of the collapsed item popup. | "staircase" | |
qa | data-qa HTML attribute, used for testing | string | |
separator | Custom separator node. | React.ReactNode | "/" |
action | click event handler. | (id: Key) => void | |
id | Element's unique ID. | string | |
className | CSS class name for the element. | string | |
style | Sets the inline style for the element. | CSSProperties | |
aria-label | Defines a string value that labels the current element. | string | |
aria-labelledby | Identifies the element(s) that label the current element. | string | |
aria-describedby | Identifies the element(s) that describe the object. | string | |
endContent | User's node rendered after last breadcrumb item. | React.ReactNode |
§BreadcrumbsItemProps
Name | Description | Type | Default |
---|---|---|---|
children | Breadcrumbs content. | string | |
title | String representation of the item contents. | string | |
aria-label | Accessibility label for the item. | string | |
href | URL to use for the hyperlink. | string | |
target | Target window for the link. | React.HTMLAttributeAnchorTarget | |
rel | Relationship between the linked resource and the current page. | string | |
disabled | Whether the BreadcrumbsItem is disabled. | boolean |