@extends('layouts.simple.master') @section('title', 'Breadcrumb') @section('css') @endsection @section('main_content')

Breadcrumb

  2. Bonus Ui
  3. 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.

  2. Bonus Ui
  2. Bonus Ui
  3. Breadcrumb
<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.

<div class="card-body breadcrumb-space">
 <nav class="breadcrumb breadcrumb-no-divider mb-0 gap-2">
   <a class="breadcrumb-item mb-1 mb-xl-0" href="javascript:void(0)">Home-></a>
   <a class="breadcrumb-item ps-0 mb-1 mb-xl-0" href="javascript:void(0)">Tables-></a>
   <a class="breadcrumb-item ps-0 mb-1 mb-xl-0" href="javascript:void(0)">Bootstrap Tables -></a>
   <span class="breadcrumb-item active ps-0">Basic Tables</span>
 </nav>
</div>
Colored Breadcrumbs

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

  1. Home
  2. Bonus Ui
  3. Breadcrumb
  1. Home
  2. Icons
  3. Flag-icon
  1. Home
  2. Gallery
  3. Gallery-grid 
<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>
@endsection @section('scripts') @endsection