Breadcrumb | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Breadcrumb

##### Default Breadcrumbs

Use `breadcrumb` class to set breadcrumb.

    <div class="card-body">
     <nav class="breadcrumb">
       <a class="breadcrumb-item" href="javascript:void(0)">Home</a>
       <span class="breadcrumb-item active">Ui Kits</span>
     </nav>
     <nav class="breadcrumb m-0">
       <a class="breadcrumb-item" href="javascript:void(0)">Home</a>
       <a class="breadcrumb-item" href="javascript:void(0)">Ui Kits</a>
       <span class="breadcrumb-item active">Alert</span></nav>
    </div>

##### Divider Breadcrumbs

Use `breadcrumb-icon` class to set divider breadcrumb with icons.

    <div class="card-body">
     <nav class="breadcrumb breadcrumb-icon">
       <a class="breadcrumb-item" href="javascript:void(0)">Home</a>
       <span class="breadcrumb-item active">Ui Kits</span>
     </nav>
     <nav class="breadcrumb breadcrumb-icon m-0">
       <a class="breadcrumb-item" href="javascript:void(0)">Home</a>
       <a class="breadcrumb-item" href="javascript:void(0)">Ui Kits</a>
       <span class="breadcrumb-item active">Progress</span>
     </nav>
    </div>

##### With Icons Breadcrumbs

Use`breadcrumb` class, to set breadcrumb with icons.

    <div class="card-body">
     <ol class="breadcrumb bg-white p-l-0">
       <li class="breadcrumb-item">
         <a href="javascript:void(0)">
         <i class="fa-solid fa-house"></i></a>
       </li>
       <li class="breadcrumb-item active">Bonus Ui</li>
     </ol>
     <ol class="breadcrumb bg-white m-b-0 p-b-0 p-l-0">
       <li class="breadcrumb-item">
         <a href="javascript:void(0)">
         <i class="fa-solid fa-house"></i></a>
       </li>
       <li class="breadcrumb-item">Bonus Ui</li>
       <li class="breadcrumb-item active">Breadcrumb</li>
     </ol>
    </div>

##### Variation of Breadcrumb

Using the `breadcrumb` class to any icon sets, you can set variations of the breadcrumb.

##### Colored Breadcrumbs

You can set background colors like `[bg-*]` and set breadcrumb using the`breadcrumb class`.

     <div class="card-body">
     <ol class="breadcrumb breadcrumb-colored m-b-30 bg-info">
       <li class="breadcrumb-item"><a class="fw-bold" href="javascript:void(0)">Home</a></li>
       <li class="breadcrumb-item"><a class="fw-bold" href="javascript:void(0)">Bonus Ui</a></li>
       <li class="breadcrumb-item active fw-bold">Breadcrumb</li>
     </ol>
     <ol class="breadcrumb breadcrumb-colored m-b-30 bg-warning">
       <li class="breadcrumb-item"><a class="fw-bold" href="javascript:void(0)">Home</a></li>
       <li class="breadcrumb-item"><a class="fw-bold" href="javascript:void(0)">Icons</a></li>
       <li class="breadcrumb-item active fw-bold">Flag-icon</li>
     </ol>
     <ol class="breadcrumb breadcrumb-colored m-0 bg-danger">
       <li class="breadcrumb-item"><a class="fw-bold" href="javascript:void(0)">Home</a></li>
       <li class="breadcrumb-item"><a class="fw-bold" href="javascript:void(0)">Gallery</a></li>
       <li class="breadcrumb-item active fw-bold">Gallery-grid</li>
     </ol>
    </div>