# Breadcrumbs
`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.
```tsx
import {Breadcrumbs} from '@gravity-ui/uikit';
```
## Example
```jsx
RegionCountryCityDistrictStreet
```
### Events
Use the `onAction` property as a callback to handle click events on items.
```jsx
const [currentId, setCurrentId] = React.useState();
const items = [
{id: 1, label: 'Region'},
{id: 2, label: 'Country'},
{id: 3, label: 'City'},
{id: 4, label: 'District'},
{id: 5, label: 'Street'},
]
{items.map((i) => {i.label})}
You clicked item ID: {currentId}
```
### 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 `` component:
```jsx
HomeComponentsBreadcrumbs
```
### 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.
```jsx
HomeTrendyMarch 2020 AssetsWinterHoliday
```
### Separator
```jsx
const breadcrumbsItems = [
Region,
Country,
City,
District,
Street,
];
{breadcrumbsItems}{breadcrumbsItems}}>{breadcrumbsItems}
```
### Breadcrumbs with icons
```jsx
uikit
components
Breadcrumbs
```
### Integration with routers
#### React Router
```jsx
import {useLinkClickHandler, useHref} from 'react-router';
import {Breadcrumbs, BreadcrumbsItem} from '@gravity-ui/uikit';
function RouterLink({to, ...rest}) {
const href = useHref(to);
const onClick = useLinkClickHandler(to);
return ;
}
function Navigation() {
return (
HomeComponentsBreadcrumbs
);
}
```
#### Next.js
```jsx
import Link from 'next/link';
import {Breadcrumbs, BreadcrumbsItem} from '@gravity-ui/uikit';
function RouterLink({href, ...rest}) {
return (
;
);
}
function Navigation() {
return (
HomeComponentsBreadcrumbs
);
}
```
#### Tanstack Router
```jsx
import {createLink} from '@tanstack/react-router';
import {Breadcrumbs, BreadcrumbsItem} from '@gravity-ui/uikit';
const RouterLink = createLink(BreadcrumbsItem);
function Navigation() {
return (
HomeComponentsBreadcrumbs
);
}
```
### Landmarks
When breadcrumbs are used as a main navigation element for a page, they can be placed in a [navigation landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html). Landmarks help the assistive technology users quickly find major sections of a page. To create a navigation landmark, place breadcrumbs inside a `