---
title: Breadcrumbs
layout: component.html
---
<h1 class="docs--page-header">Breadcrumbs</h1>

<p class="docs--page-description">
    Indicate the current page's location within a navigational hierarchy.
</p>

<p class="docs--section-description">
    Separators are automatically added in CSS through :before and content.
</p>

<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
    <div class="docs--example-container demo docs--prism" data-xrayhtml><ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol></div>
</div>