---
meta:
title: Breadcrumb
description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
layout: component
---
Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.
```html:preview
Catalog
Clothing
Women's
Shirts & Tops
```
```jsx:react
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
const App = () => (
Catalog
Clothing
Women's
Shirts & Tops
);
```
## Examples
### Breadcrumb Links
By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you'll need to add event listeners to handle clicks.
For websites, you'll probably want to use links instead. You can make any breadcrumb item a link by applying an `href` attribute to it. Now, when the user activates it, they'll be taken to the corresponding page — no event listeners required.
```html:preview
Homepage
Our Services
Digital Media
Web Design
```
```jsx:react
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
const App = () => (
Homepage
Our Services
Digital Media
Web Design
);
```
### Custom Separators
Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
```html:preview
First
Second
Third
First
Second
Third
/
First
Second
Third
```
```jsx:react
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
const App = () => (
<>
First
Second
Third
First
Second
Third
/
First
Second
Third
>
);
```
### Prefixes
Use the `prefix` slot to add content before any breadcrumb item.
```html:preview
Home
Articles
Traveling
```
```jsx:react
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
Home
Articles
Traveling
);
```
### Suffixes
Use the `suffix` slot to add content after any breadcrumb item.
```html:preview
Documents
Policies
Security
```
```jsx:react
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
Documents
Policies
Security
);
```
### With Dropdowns
Dropdown menus can be placed in a prefix or suffix slot to provide additional options.
```html:preview
Homepage
Our Services
Digital Media
Web Design
Web Design
Web Development
Marketing
```
```jsx:react
import {
SlBreadcrumb,
SlBreadcrumbItem,
SlButton,
SlDropdown,
SlIcon,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => (
Homepage
Our Services
Digital Media
Web Design
Web Design
Web Development
Marketing
);
```