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

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

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

Flexible Structure Example

            
            

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 all-border-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:

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:

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