Skip to main content
/
/
/
Breadcrumbs

Breadcrumbs

Display a path to the active page

React component

Separated by a /:

<div class="bf-breadcrumbs">
  <div>
    <a href="#root_path">Root page</a>
  </div>
  <div class="bf-breadcrumb-separator">/</div>
  <div>
    <a href="#sub_page_path">Sub-page</a>
  </div>
  <div class="bf-breadcrumb-separator">/</div>
  <div>Current page</div>
</div>
/
/
Current page

Sandbox

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css">
<link rel="stylesheet" href="styles.css">

<div class="bf-page-padding">
  <div class="bf-breadcrumbs">
    <div>
      <a href="#root_path">Root page</a>
    </div>
    <div class="bf-breadcrumb-separator">/</div>
    <div>
      <a href="#sub_page_path">Sub-page</a>
    </div>
    <div class="bf-breadcrumb-separator">/</div>
    <div>Current page</div>
  </div>
</div>