Breadcrumb

cds-breadcrumb

The breadcrumb component is a navigational aid that helps users understand their location within a website or application. It provides a clear path back to previous sections, improving navigation and reducing friction. Whether guiding users through complex hierarchies or offering quick access to parent pages, this component ensures intuitive and consistent navigation.

Default

• Home
• Intrastructure
• Installations
• My custom installation #1

<ul class="cds-breadcrumb">
    <li class="cds-breadcrumb__item"><a>Home</a></li>
    <li class="cds-breadcrumb__item">Intrastructure</li>
    <li class="cds-breadcrumb__item"><a>Installations</a></li>
    <li class="cds-breadcrumb__item is-active">My custom installation #1</li>
</ul>

---

Elements

Element	Code	Parent	HTML tag	Required
Item	cds-breadcrumb__item	Block: cds-breadcrumb	<li>	required

• If li item has no link, it should be a plain text and it will appear as disabled.
• If li item has a link, it should be wrapped in an a tag.
• If li item is active, it should have the class is-active. The last item in the breadcrumb should be active.

• This item has a link
• This item has no link
• This item is active (last item)

---

States

Modifier	Options
Item	is-active

Is active

• This item has a link
• This item has no link
• This item is active (last item)

<ul class="cds-breadcrumb">
    <li class="cds-breadcrumb__item"><a>This item has a link</a></li>
    <li class="cds-breadcrumb__item">This item has no link</li>
    <li class="cds-breadcrumb__item is-active">This item is active (last item)</li>
</ul>