Breadcrumb Component #

Description #

The Breadcrumb component indicates the current page's location within a navigational hierarchy. It helps users navigate easily through different pages on the website. The component supports various styles, icons, and separators.

Examples and Classes #

Basic Example

            

                
            
            

                
                
HTML
                
            
            <nav class="breadcrumb" style="--content:'→';">
    <ul class="txt-normal bg-secondary-color px-2 py-1 radius-all-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>
        

Arrow Separator Example

            

                

                    
                
            
            

                
                
HTML
                
            
            <nav class="breadcrumb justify-content-start w-100" style="--content-image:url(https://cdn-icons-png.flaticon.com/256/7488/7488470.png);--content-image-size:20px">
    <ul class="txt-normal bg-secondary-color px-2 py-1 radius-all-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>
        

Image Separator Example

            

                
            
            

                
                
HTML
                
            
            <nav class="breadcrumb" style="--content-image:url(https://cdn-icons-png.flaticon.com/256/7488/7488470.png);--content-image-size:20px">
    <ul class="txt-normal bg-secondary-color px-2 py-1 radius-all-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>
        

Flexible Structure Example

            

                

                    

                        

                            

                                miz
                                
                            
                            

                                Documentation
                                
                            
                            

                                Components
                                
                            
                        
                    
                
            
            

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

The breadcrumb component offers two ways to structure its items:

• Using semantic HTML with li elements inside ul or ol
• Using div elements with the breadcrumb-item class

Both approaches are valid and will work the same way. Choose the one that better fits your project's needs. The key is to maintain the proper nesting of elements and use the appropriate classes.

Available Classes

Class	Description
.breadcrumb	Main class for the breadcrumb component
.breadcrumb-item	Class for individual breadcrumb items (alternative to li elements)
.active	Indicates the current/active item
.icon-small	For small-sized icons
.icon-extra-small	For extra-small icons
.icon-regular	For regular-sized icons

Layout Variations

The breadcrumb component supports different layout variations:

• Text Separator: Uses text characters (like →) as separators
• Image Separator: Uses images as separators between items
• Flexible Structure: Can use either semantic HTML (ul/li) or div elements
• Alignment Options: Supports different alignments (start, center, end)

Customization Options

Variable	Description
--content	CSS variable to customize the separator between items
--content-image	CSS variable to use an image as separator
--content-image-size	CSS variable to set the size of the separator image

File Locations #

Type	Path
SCSS	miz/themes/mizoon/components/breadcrumb/_index.scss
HTML Example	miz/themes/mizoon/components/breadcrumb/index.html
JavaScript	miz/themes/mizoon/components/breadcrumb/script.js

SCSS Variables #

            

                
                
SCSS
                
            
            $breadcrumb-items-color: "on-secondary";
$breadcrumb-items-active-color: "primary";
$breadcrumb-items-after-margin-inline-end: 0.5rem;
        

JavaScript #

Currently, there is no specific JavaScript functionality for the breadcrumb component.

            

                
                
JavaScript
                
            
            // No JavaScript functionality required