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 olwith 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