## Anatomy
The Breadcrumbs consists of three primary elements that work together to represent navigation hierarchy.
1. Breadcrumb item link
2. Separator
3. Current page
## Options
The Breadcrumbs supports one configuration that shows each Breadcrumb Item as a link, with the last item representing the current page.
### Default
```tsx lines theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function App() {
return (
Home PageSub PageCurrent Page
);
}
export default App;
```
Breadcrumbs have one configuration. Each Breadcrumb Item displays as a link, and the last Breadcrumb Item represents the current page.
## Behavior
The Breadcrumbs responds to navigation interactions and overflow scenarios while maintaining clear hierarchy representation.
### Visual States
```tsx lines theme={null}
import { Breadcrumbs, Flex } from "@servicetitan/anvil2";
function App() {
return (
Default BreadcrumbCurrent Page
Hover Breadcrumb
Current Page
Active Breadcrumb
Current Page
Focus Visible Breadcrumb
Current Page
);
}
export default App;
```
Note that the last Breadcrumb item, the current page, is not interactive, and has no additional visual states.
### Interactions
All Breadcrumb items except the last item are links. Do not place items that cannot be represented as navigational elements in the Breadcrumbs.
### Breadcrumb Group Overflow
```tsx lines theme={null}
import { Breadcrumbs, Flex } from "@servicetitan/anvil2";
function App() {
return (
Item 1Item 2Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Item 9Item 10Item 11Item 12
);
}
export default App;
```
### Breadcrumb Item Overflow
```tsx lines theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function App() {
return (
Item 1Longer Item
This is a very long item to show what happens when one individual
Breadcrumb item is incredibly long for some reason
Item 4Item 5
);
}
export default App;
```
## Usage Guidelines
### When to Use
Use Breadcrumbs when the product area has a multi-level hierarchy that allows users to understand and navigate the product hierarchy.
### When not to use
Do not use Breadcrumbs when:
* There is no hierarchical relation to display
* Users cannot navigate through the hierarchy displayed in a Breadcrumb
* A user is in a linear flow. Use a [Stepper](/docs/web/components/stepper/design) instead.
### How to Use
#### Only use Breadcrumbs to represent the site hierarchy
Use Breadcrumbs only to represent the hierarchy of the site or product area. This is sometimes known as location-based Breadcrumbs.
Do not use Breadcrumbs to denote path-based behavior, where Breadcrumb content is dynamically generated based on the path users took to get to a page.
```tsx lines theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function App() {
return (
WebComponents
Breadcrumbs
);
}
export default App;
```
**Do** Example using this doc site to show the site hierarchy.
```tsx lines theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function App() {
return (
ButtonForms
Breadcrumbs
);
}
export default App;
```
**Don't** Example of a hypothetical user session arriving to the same page. Breadcrumbs should not be used this way.
#### Always show the current page in the Breadcrumbs
When using Breadcrumbs, always represent the current page in the Breadcrumbs, even if the page title shows the same content.
```tsx lines theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function App() {
return (
Item 1Item 2Current page
);
}
export default App;
```
**Do**
```tsx lines theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function App() {
return (
Item 1Item 2
);
}
export default App;
```
**Don't**
#### Always provide navigation within Breadcrumbs
Breadcrumb items always have a link to navigate. If part of the hierarchy lacks a link, do not include it in the Breadcrumb trail. The trailing Breadcrumb item, the current page, does not display its own link.
#### Skip the Breadcrumbs for the top-level item
The top-most part of the Breadcrumb hierarchy does not need to display the Breadcrumbs directly. For example, if the first Breadcrumb item was a "Settings" page, the actual Settings page would not show the Breadcrumb.
## Content
Content within the Breadcrumbs should clearly represent the navigation hierarchy through descriptive labels.
## Keyboard Interaction
Users can navigate the Breadcrumbs using standard keyboard controls.
| Key | Interaction |
| ----- | --------------------------------------------------- |
| Enter | Engages the link and moves focus to the link target |
| Tab | Navigates linked Breadcrumbs in normal Tab order |
