Navigations

Breadcrumbs

Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.

Default Breadcrumb

Using the .breadcrumb class on <nav> element.

Dark Breadcrumb

Using the .dark-mode .bg-inverse class on .breadcrumb.

<!-- default breadcrumb -->
<nav class="breadcrumb bg-white">
    <a class="breadcrumb-item" href="#x"><span>Home</span></a>
    <a class="breadcrumb-item" href="#x"><span>Link</span></a>
    <span class="breadcrumb-item active"><span>Active</span></span>
</nav><!-- / breadcrumb -->

<!-- dark breadcrumb -->
<nav class="breadcrumb dark-mode bg-inverse">
    <a class="breadcrumb-item" href="#x">Home</a>
    <a class="breadcrumb-item" href="#x">Link</a>
    <span class="breadcrumb-item active">Active</span>
</nav><!-- / breadcrumb -->

Default Pagination

Standard paginations with numbers. Add .pill-pagination for rounded pagination.

Default Pagination
Pill Pagination
<!-- default pagination -->
<ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#x"><i class="bi-chevron-left mb-5"></i></a></li>
    <li class="page-item active"><a class="page-link" href="#x">1</a></li>
    <li class="page-item"><a class="page-link" href="#x">2</a></li>
    <li class="page-item"><a class="page-link" href="#x">3</a></li>
    <li class="page-item"><a class="page-link" href="#x"><i class="bi-chevron-right mb-5"></i></a></li>
</ul><!-- / pagination -->

<!-- pill-pagination -->
<ul class="pagination pill-pagination">
    <li class="page-item disabled"><a class="page-link" href="#x"><i class="bi-chevron-left mb-5"></i></a></li>
    <li class="page-item"><a class="page-link" href="#x">1</a></li>
    <li class="page-item active"><a class="page-link" href="#x">2</a></li>
    <li class="page-item"><a class="page-link" href="#x">3</a></li>
    <li class="page-item"><a class="page-link" href="#x"><i class="bi-chevron-right mb-5"></i></a></li>
</ul><!-- / pill-pagination -->

Button Group Pagination

Button paginations wrapped in .btn-group.

<div class="btn-group btn-pagination" role="group" aria-label="First group">
    <button type="button" class="btn btn-icon btn-highlight disabled">
        <span class="bi-arrow-left"></span>
    </button>
    <button type="button" class="btn btn-icon btn-primary">
        <span>1</span>
    </button>
    <button type="button" class="btn btn-icon btn-highlight">
        <span>2</span>
    </button>
    <button type="button" class="btn btn-icon btn-highlight">
        <span>3</span>
    </button>
    <button type="button" class="btn btn-icon btn-highlight">
        <span class="bi-arrow-right"></span>
    </button>
</div><!-- / button-group -->
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav