DashByte - Premium Dashboard Template

Components

Breadcrumbs

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Basic Styling

The example below is the basic styling of the breadcrumb from Bootstrap.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Custom Styling

The example below is the custom styling of the breadcrumb used by this template.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-custom1">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Custom Divider

The example below is the custom styling of the breadcrumb using different divider.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-custom2">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Shaira Diaz

Breadcrumbs

Basic Styling

Custom Styling

Custom Divider