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.
<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>
<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>
<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>
<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.
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 |
The breadcrumb component supports different layout variations:
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 |
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 |
$breadcrumb-items-color: "on-secondary";
$breadcrumb-items-active-color: "primary";
$breadcrumb-items-after-margin-inline-end: 0.5rem;
Currently, there is no specific JavaScript functionality for the breadcrumb component.
// No JavaScript functionality required