Breadcrumbs

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

Component Props


Text / Background Color Theme [COLOR_THEME]

Using the Sass color-contrast() function, the text color is automatically determined based on the defined $color-contrast-dark and $color-contrast-light text color variables for the contrasting color for a particular background-color. Available classes are:

View in new window for full preview

Container Modifier [CONTAINER]

Use .container-fluid for a full width container, spanning the entire width of the viewport

.container
Standard width section contrainer. Container width snaps to width at breakpoints.
.container-fluid
Full width section contrainer. Container runs from edge to egde of the viewport
.container-xxl
Standard width section contrainer. Fluid container until maximum container width is reached.
Template
      
        <div class="sec-breadcrumbs [COLOR_THEME]">
          <div class="[CONTAINER]">
            <div class="row">
              <div class="col">
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <!-- Crumb -->
                    <li class="breadcrumb-item"><a href="[CRUMB_URL]">[CRUMB_LABEL]</a></li>
                    ...
                    <!-- Active crumb -->
                    <li class="breadcrumb-item active" aria-current="page">[CRUMB_LABEL]</li>
                  </ol>
                </nav>
              </div>
            </div>
          </div>
        </div>

Breadcrumb Examples

View in new window for full preview
      
        <!-- Base example -->
  <div class="sec-breadcrumbs">
     <div class="container-xxl">
      <div class="row">
        <div class="col">
          <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>
      </div>
    </div>
  </div>
  
  <!-- Secondary background color example -->
  <div class="sec-breadcrumbs text-bg-secondary">
     <div class="container-xxl">
      <div class="row">
        <div class="col">
          <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>
      </div>
    </div>
  </div>

Dark Background Examples

View in new window for full preview
      
        <!-- Dark background color example -->
  <div class="sec-breadcrumbs text-bg-dark">
     <div class="container-xxl">
      <div class="row">
        <div class="col">
          <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>
      </div>
    </div>
  </div>
  
  <!-- Primary background color example -->
  <div class="sec-breadcrumbs text-bg-primary">
     <div class="container-xxl">
      <div class="row">
        <div class="col">
          <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>
      </div>
    </div>
  </div>