MIZ

Github

MIZ v1.20.1

v1.20.1

Browse docs

Breadcrumb Component

The Breadcrumb component indicates the current page’s location within a navigational hierarchy. It helps users navigate easily through different pages on the website.

Examples #

Example 1: Breadcrumb with Icons

    

    

        
        
HTML

        
    

    <div class="justify-content-center">
            <nav class="breadcrumb" style="--content:url(../../media/images/breadcrumb.png)">
                <ol class="txt-mid-title bg-secondary-color px-2 py-1 all-border-normal">
                    <li>
                        <a href="#">miz</a>
                        <i class="fa-solid fa-house icon-regular"></i>
                    </li>
                    <li class="active">
                        <a href="#">Documentation</a>
                        <i class="fa-solid fa-book icon-regular"></i>
                    </li>
                    <li>
                        <a href="#">Components</a>
                        <i class="fa-solid fa-box icon-regular"></i>
                    </li>
                </ol>
            </nav>
        </div>

Example 2: Simple Breadcrumb

    

    

        
        
HTML

        
    

    <nav class="breadcrumb" style="--content:'';">
            <ul class="txt-normal bg-secondary-color px-2 py-1 all-border-normal">
                <li>
                    <a href="#">miz</a>
                    <i class="fa-solid fa-house icon-small"></i>
                </li>
                <li>
                    <a href="#">Documentation</a>
                    <i class="fa-solid fa-book icon-small"></i>
                </li>
                <li class="active">
                    <a href="#">Components</a>
                    <i class="fa-solid fa-box icon-small"></i>
                </li>
            </ul>
        </nav>

Example 3: Right-Aligned Breadcrumb

    

    

        
        
HTML

        
    

    <div class="justify-content-end">
            <div class="breadcrumb" style="--content:'→';">
                <div class="txt-small bg-secondary-color px-2 py-1 all-border-normal">
                    <li class="active">
                        <a href="#">miz</a>
                        <i class="fa-solid fa-house icon-extra-small"></i>
                    </li>
                    <li>
                        <a href="#">Documentation</a>
                        <i class="fa-solid fa-book icon-extra-small"></i>
                    </li>
                    <li>
                        <a href="#">Components</a>
                        <i class="fa-solid fa-box icon-extra-small"></i>
                    </li>
                </div>
            </div>
        </div>

Classes #

Class Description
.breadcrumb Add this class to a nav element to activate the breadcrumb.
.active Use this class to indicate the current path or active item.
.icon-small For smaller icons in the breadcrumb.
.icon-extra-small For extra-small icons in the breadcrumb.

Options #

Use the --content variable to customize the separator between breadcrumb items.

On this page