Breadcrumbs

Breadcrumbs provide a group of links so users can easily navigate a website’s hierarchy. 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.

Large

Level 1Level 2Level 3You are here

Medium

Default size

Level 1Level 2Level 3You are here

Small

Level 1Level 2Level 3You are here

<h2>Large</h2>
<six-breadcrumbs size="large">
  <six-breadcrumbs-item>Level 1</six-breadcrumbs-item>
  <six-breadcrumbs-item>Level 2</six-breadcrumbs-item>
  <six-breadcrumbs-item>Level 3</six-breadcrumbs-item>
  <six-breadcrumbs-item>You are here</six-breadcrumbs-item>
</six-breadcrumbs>

<h2>Medium</h2>
<p>Default size</p>
<six-breadcrumbs size="large">
  <six-breadcrumbs-item>Level 1</six-breadcrumbs-item>
  <six-breadcrumbs-item>Level 2</six-breadcrumbs-item>
  <six-breadcrumbs-item>Level 3</six-breadcrumbs-item>
  <six-breadcrumbs-item>You are here</six-breadcrumbs-item>
</six-breadcrumbs>

<h2>Small</h2>
<six-breadcrumbs size="small">
  <six-breadcrumbs-item>Level 1</six-breadcrumbs-item>
  <six-breadcrumbs-item>Level 2</six-breadcrumbs-item>
  <six-breadcrumbs-item>Level 3</six-breadcrumbs-item>
  <six-breadcrumbs-item>You are here</six-breadcrumbs-item>
</six-breadcrumbs>

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.

arrow_rightLevel 1Level 2Level 3You are here

<six-breadcrumbs>
  <six-icon slot="separator">arrow_right</six-icon>
  <six-breadcrumbs-item>Level 1</six-breadcrumbs-item>
  <six-breadcrumbs-item>Level 2</six-breadcrumbs-item>
  <six-breadcrumbs-item>Level 3</six-breadcrumbs-item>
  <six-breadcrumbs-item read-only>You are here</six-breadcrumbs-item>
</six-breadcrumbs>

Using separator-icon attribute

Level 1Level 2Level 3You are here

<six-breadcrumbs separator-icon="arrow_right">
  <six-breadcrumbs-item>Level 1</six-breadcrumbs-item>
  <six-breadcrumbs-item>Level 2</six-breadcrumbs-item>
  <six-breadcrumbs-item>Level 3</six-breadcrumbs-item>
  <six-breadcrumbs-item>You are here</six-breadcrumbs-item>
</six-breadcrumbs>

Prefixes

Use the prefix slot to add content before any breadcrumb item.

arrow_righthouse Home PageCurrent

<six-breadcrumbs>
  <six-icon slot="separator" size="small">arrow_right</six-icon>
  <six-breadcrumbs-item>
    <six-icon slot="prefix" size="small">house</six-icon>
    Home
  </six-breadcrumbs-item>
  <six-breadcrumbs-item>Page</six-breadcrumbs-item>
  <six-breadcrumbs-item>Current</six-breadcrumbs-item>
</six-breadcrumbs>

Suffixes

Use the suffix slot to add content after any breadcrumb item.

arrow_rightHomePagelock Current

<six-breadcrumbs>
  <six-icon slot="separator" size="small">arrow_right</six-icon>
  <six-breadcrumbs-item>Home</six-breadcrumbs-item>
  <six-breadcrumbs-item>Page</six-breadcrumbs-item>
  <six-breadcrumbs-item>
    <six-icon slot="suffix" size="small">lock</six-icon>
    Current
  </six-breadcrumbs-item>
</six-breadcrumbs>

Styling

Use CSS custom properties to customize the appearance of breadcrumb items.

HomePageCurrent

<div class="custom-styling">
  <six-breadcrumbs>
    <six-breadcrumbs-item>Home</six-breadcrumbs-item>
    <six-breadcrumbs-item>Page</six-breadcrumbs-item>
    <six-breadcrumbs-item>Current</six-breadcrumbs-item>
  </six-breadcrumbs>
</div>

Dynamically Add/Remove Items

Items can be dynamically added and removed.

RemoveAddItem 0Item 1

<six-button type="secondary" id="remove-button">Remove</six-button>
<six-button type="secondary" id="add-button">Add</six-button>

<six-breadcrumbs id="dynamic-breadcrumbs">
  <six-breadcrumbs-item>Item 0</six-breadcrumbs-item>
  <six-breadcrumbs-item>Item 1</six-breadcrumbs-item>
</six-breadcrumbs>

<script type="module">
  let counter = 2;
  const breadcrumbs = document.getElementById('dynamic-breadcrumbs');

  document.getElementById('remove-button').addEventListener('click', () => {
    breadcrumbs.lastElementChild?.remove();
  });

  document.getElementById('add-button').addEventListener('click', () => {
    const item = document.createElement('six-breadcrumbs-item');
    item.textContent = `Item ${counter++}`;
    breadcrumbs.append(item);
  });
</script>

Overview

Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.

Properties

Property	Attribute	Description	Type	Default
separatorIcon	separator-icon	Defines an icon as a separator without having to place a slot. Default value: chevron_right *	string	'chevron_right'
size	size	The breadcrumbs item size.	"large" | "medium" | "small"	'medium'

Slots

Slot	Description
	One or more breadcrumb items to display.
"separator"	The separator to use between breadcrumb items. Works best with six-icon.

Shadow Parts

Part	Description
"base"	The component's base wrapper.

Dependencies

Depends on

• six-icon

Graph

---

Copyright © 2021-present SIX-Group