@extends('layouts.contentLayoutMaster')
{{-- page title --}}
@section('title','Breadcrumbs')

@section('content')
<!-- Default Breadcrumb Starts -->
<section id="default-breadcrumb">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Default</h4>
        </div>
        <div class="card-content">
          <div class="card-body">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#"><i class="bx bx-home"></i></a></li>
                <li class="breadcrumb-item"><a href="#">Library</a></li>
                <li class="breadcrumb-item"><a href="#">Data</a></li>
                <li class="breadcrumb-item active" aria-current="page">Link</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Default Breadcrumb Ends -->

<!-- Breadcrumb with Divider Starts -->
<section id="breadcrumb-divider">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Breadcrumb Divider Icon with Active Link Fill</h4>
        </div>
        <div class="card-content">
          <div class="card-body">
            <p>To change Divider Icon, add <code>.breadcrumb-divider</code> class alongwith <code>.breadcrumb</code>
              class.</p>
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb breadcrumb-divider">
                <li class="breadcrumb-item"><a href="#"><i class="bx bx-home"></i></a></li>
                <li class="breadcrumb-item"><a href="#">Library</a></li>
                <li class="breadcrumb-item"><a href="#">Data</a></li>
                <li class="breadcrumb-item active" aria-current="page">Link</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Default Breadcrumb Ends -->

<!-- Breadcrumb with Rounded Shape Starts -->
<section id="breadcrumb-rounded">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Breadcrumb Rounded</h4>
        </div>
        <div class="card-content">
          <div class="card-body">
            <p>For Rounded Breadcrumb, add <code>.rounded-pill</code> class alongwith <code>.breadcrumb</code> class.
            </p>
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb rounded-pill">
                <li class="breadcrumb-item"><a href="#"><i class="bx bx-home"></i></a></li>
                <li class="breadcrumb-item"><a href="#">Library</a></li>
                <li class="breadcrumb-item"><a href="#">Data</a></li>
                <li class="breadcrumb-item active" aria-current="page">Link</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Default Breadcrumb Ends -->

<!-- Breadcrumb with Divider and Rounded Shape Starts -->
<section id="breadcrumb-rounded-divider">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Breadcrumb Rounded with Divider Icon and Active Link Fill</h4>
        </div>
        <div class="card-content">
          <div class="card-body">
            <p>For Rounded Breadcrumb with change divider icon, add <code>.rounded-pill.breadcrumb-divider</code> class
              alongwith <code>.breadcrumb</code> class. </p>
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb rounded-pill breadcrumb-divider">
                <li class="breadcrumb-item"><a href="#"><i class="bx bx-home"></i></a></li>
                <li class="breadcrumb-item"><a href="#">Library</a></li>
                <li class="breadcrumb-item"><a href="#">Data</a></li>
                <li class="breadcrumb-item active" aria-current="page">Link</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Default Breadcrumb Ends -->
@endsection