Datum

#### Breadcrumb

`

    <nav aria-label="breadcrumb">
       <ol class="breadcrumb">
          <li class="breadcrumb-item active" aria-current="page">Home</li>
       </ol>
    </nav>
    <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>

`

Use the items in order to programatically generate the breadcrumb links.use class `.breadcrumb to ol`

#### Breadcrumb With Icon

`

    <nav aria-label="breadcrumb">
       <ol class="breadcrumb">
          <li class="breadcrumb-item active" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
       </ol>
    </nav>
    <nav aria-label="breadcrumb">
       <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#"><i class="ri-home-4-line mr-1 float-left"></i>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="#"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
          <li class="breadcrumb-item"><a href="#">Library</a></li>
          <li class="breadcrumb-item active" aria-current="page">Data</li>
       </ol>
    </nav>

`

Use the items in order to programatically generate the breadcrumb links.use class `.breadcrumb to ol` with Icon

#### Breadcrumb

`

    <nav aria-label="breadcrumb ">
       <ol class="breadcrumb bg-primary">
          <li class="breadcrumb-item active text-white" aria-current="page">Home</li>
       </ol>
    </nav>
    <nav aria-label="breadcrumb">
       <ol class="breadcrumb bg-primary">
          <li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
          <li class="breadcrumb-item active text-white" aria-current="page">Library</li>
       </ol>
    </nav>
    <nav aria-label="breadcrumb">
       <ol class="breadcrumb bg-primary mb-0">
          <li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
          <li class="breadcrumb-item"><a href="#" class="text-white">Library</a></li>
          <li class="breadcrumb-item active text-white" aria-current="page">Data</li>
       </ol>
    </nav>

`

use class `.breadcrumb .bg-primary`

#### Breadcrumb With Icon

`

    <nav aria-label="breadcrumb">
       <ol class="breadcrumb bg-primary">
          <li class="breadcrumb-item active text-white" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
       </ol>
    </nav>
    <nav aria-label="breadcrumb">
       <ol class="breadcrumb bg-primary">
          <li class="breadcrumb-item"><a href="#" class="text-white"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
          <li class="breadcrumb-item active text-white" aria-current="page">Library</li>
       </ol>
    </nav>
    <nav aria-label="breadcrumb">
       <ol class="breadcrumb bg-primary mb-0">
          <li class="breadcrumb-item"><a href="#" class="text-white"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
          <li class="breadcrumb-item"><a href="#" class="text-white">Library</a></li>
          <li class="breadcrumb-item active text-white" aria-current="page">Data</li>
       </ol>
    </nav>

`

use class `.breadcrumb .bg-primary` With Icon.

#### Breadcrumb With Icon

`

    <nav aria-label="breadcrumb">
       <ol class="breadcrumb iq-bg-primary">
          <li class="breadcrumb-item active" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
       </ol>
    </nav>
    <nav aria-label="breadcrumb">
       <ol class="breadcrumb iq-bg-primary">
          <li class="breadcrumb-item"><a href="#"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
          <li class="breadcrumb-item active" aria-current="page">Library</li>
       </ol>
    </nav>
    <nav aria-label="breadcrumb">
       <ol class="breadcrumb iq-bg-primary mb-0">
          <li class="breadcrumb-item"><a href="#"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
          <li class="breadcrumb-item"><a href="#">Library</a></li>
          <li class="breadcrumb-item active" aria-current="page">Data</li>
       </ol>
    </nav>

`

use class `.breadcrumb .iq-bg-primary`

#### Breadcrumb With Icon

`

    <nav aria-label="breadcrumb">
       <ol class="breadcrumb iq-bg-danger">
          <li class="breadcrumb-item active" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
       </ol>
    </nav>
    <nav aria-label="breadcrumb">
       <ol class="breadcrumb iq-bg-danger">
          <li class="breadcrumb-item"><a href="#" class="text-danger"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
          <li class="breadcrumb-item active" aria-current="page">Library</li>
       </ol>
    </nav>
    <nav aria-label="breadcrumb">
       <ol class="breadcrumb iq-bg-danger mb-0">
          <li class="breadcrumb-item"><a href="#" class="text-danger"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
          <li class="breadcrumb-item"><a href="#" class="text-danger">Library</a></li>
          <li class="breadcrumb-item active" aria-current="page">Data</li>
       </ol>
    </nav>

`

use class `.breadcrumb .iq-bg-danger`