> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Breadcrumbs - Web
> Breadcrumbs represent the hierarchy of an app that users can navigate through.
> [!NOTE]
>
> For development, import `Breadcrumbs` from
> `@servicetitan/anvil2`. For design, find it in the
> [Anvil2 file](https://www.figma.com/design/xaNQsvRKczoxu7pj0M6QT8/Anvil2-v3?node-id=59-3420).
## 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
breadcrumbs-playground
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/breadcrumbs-playground?file=src/App.tsx)
```tsx lines theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function App() {
return (
Home Page
Sub Page
Current 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
breadcrumbs-data-interactive
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/breadcrumbs-data-interactive?file=src/App.tsx)
```tsx lines theme={null}
import { Breadcrumbs, Flex } from "@servicetitan/anvil2";
function App() {
return (
Default Breadcrumb
Current 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
breadcrumbs-overflow
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/breadcrumbs-overflow?file=src/App.tsx)
```tsx lines theme={null}
import { Breadcrumbs, Flex } from "@servicetitan/anvil2";
function App() {
return (
Item 1
Item 2
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
);
}
export default App;
```
### Breadcrumb Item Overflow
breadcrumbs-link-overflow
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/breadcrumbs-link-overflow?file=src/App.tsx)
```tsx lines theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function App() {
return (
Item 1
Longer Item
This is a very long item to show what happens when one individual
Breadcrumb item is incredibly long for some reason
Item 4
Item 5
);
}
export default App;
```
## Usage Guidelines
| Standard | Requirement |
| - | - |
| DoMulti-level hierarchy navigation | The product area has a multi-level hierarchy that allows users to understand and navigate it. |
| DoLocation-based hierarchy | Use Breadcrumbs only to represent the hierarchy of the site or product area (location-based Breadcrumbs); see [Only use Breadcrumbs to represent the site hierarchy](#only-use-breadcrumbs-to-represent-the-site-hierarchy). |
| DoShow the current page | Always represent the current page in the Breadcrumbs, even if the page title shows the same content; see [Always show the current page in the Breadcrumbs](#always-show-the-current-page-in-the-breadcrumbs). |
| Don'tNo hierarchical relation | There is no hierarchical relation to display. |
| Don'tNon-navigable hierarchy | Users cannot navigate through the hierarchy displayed in a Breadcrumb. |
| Don'tLinear flow | A user is in a linear flow. Use a [Stepper](https://anvil.servicetitan.com/docs/components/stepper/web.md) instead. |
| Don'tPath-based Breadcrumbs | Don't use Breadcrumbs to denote path-based behavior, where content is dynamically generated based on the path a user took to reach a page; see [Only use Breadcrumbs to represent the site hierarchy](#only-use-breadcrumbs-to-represent-the-site-hierarchy). |
### 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.
breadcrumbs-hierarchy-do
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/breadcrumbs-hierarchy-do?file=src/App.tsx)
```tsx lines theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function App() {
return (
Web
Components
Breadcrumbs
);
}
export default App;
```
> [!TIP]
>
> **Do** Example using this doc site to show the site hierarchy.
breadcrumbs-hierarchy-dont
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/breadcrumbs-hierarchy-dont?file=src/App.tsx)
```tsx lines theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function App() {
return (
Button
Forms
Breadcrumbs
);
}
export default App;
```
> [!CAUTION]
>
> **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.
breadcrumbs-current-page-do
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/breadcrumbs-current-page-do?file=src/App.tsx)
```tsx lines theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function App() {
return (
Item 1
Item 2
Current page
);
}
export default App;
```
> [!TIP]
>
> **Do**
breadcrumbs-current-page-dont
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/breadcrumbs-current-page-dont?file=src/App.tsx)
```tsx lines theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function App() {
return (
Item 1
Item 2
);
}
export default App;
```
> [!CAUTION]
>
> **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 |
## Code
**Implementation**
breadcrumbs-playground
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/breadcrumbs-playground?file=src/App.tsx)
```tsx lines expandable theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function App() {
return (
Home Page
Sub Page
Current Page
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { Breadcrumbs } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
Home
Page
);
}
```
### Building breadcrumbs from data
Breadcrumbs are slim wrappers around an HTML `nav` element with some `a` links and a `span` for the current page.
To create dynamic breadcrumbs on a page, collect the page names and URLs in an array and map it to `Breadcrumbs.Link` components.
**Note:** the final breadcrumb will be treated as the current page, and will render as plain text instead of a link.
```tsx theme={null}
const sampleData = [
{
name: "Home",
url: "https://some.url/",
},
{
name: "Reports",
url: "https://some.url/reports",
},
{
name: "Weekly Report",
// this url will be ignored as the current page
url: "https://some.url/reports/weekly-report",
},
];
export const SampleComponent = () => {
return (
{sampleData.map((link) => (
{link.name}
))}
);
};
```
**Breadcrumbs Props**
```tsx theme={null}
Home
Products
```
## `Breadcrumbs` Props
The `Breadcrumbs` component can accept any valid HTML `nav` props.
**Breadcrumbs.Link Props**
```tsx theme={null}
Home
```
## `Breadcrumbs.Link` Props
The `Breadcrumbs.Link` component can accept any valid HTML `a` props.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.