Breadcrumbs

Indicate the current page’s location within a navigational hierarchy.

Component Props

    
      - crumbName: [string] - Text to display with crumb
        crumbUrl: [string] - crumb URL

Base Example

View in new window for full preview

      
        <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Crumb 1</a></li>
      <li class="breadcrumb-item"><a href="#">Crumb 2</a></li>
      <li class="breadcrumb-item"><a href="#">Crumb 3</a></li>
      <li class="breadcrumb-item active" aria-current="page">Active Crumb</li>
    </ol>
  </nav>

Dark Background Example

When breadcrumb component placed in a container with a dark background.

View in new window for full preview

      
        <div class="text-bg-dark">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Crumb 1</a></li>
        <li class="breadcrumb-item"><a href="#">Crumb 2</a></li>
        <li class="breadcrumb-item"><a href="#">Crumb 3</a></li>
        <li class="breadcrumb-item active" aria-current="page">Active Crumb</li>
      </ol>
    </nav>
  </div>