Breadcrumb Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Enable Component
Enable the breadcrumb component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                breadcrumb: true // Enable breadcrumb component
            }
        }
    }
}
Basic Usage
Explore more examples from the previewer tab
<ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Page</a></li>
    <li class="breadcrumb-item active" aria-current="page">Sub Page</li>
</ul>
NameDescription
.breadcrumbBase class of the breadcrumb component
.breadcrumb.breadcrumb-arrow-separatorApplies arrow separators between each breadcrumb item
.breadcrumb.breadcrumb-smApplies small breadcrumb style
.breadcrumb.breadcrumb-lgApplies large breadcrumb style
.breadcrumb > .breadcrumb-itemBase class of a breadcrumb item
.breadcrumb > .breadcrumb-item.activeindicates active state of a breadcrumb item
Customize variables at:/library/extend/components/_breadcrumb.scss
Component's defaults:/library/components/breadcrumb/_defaults.scss
NameDefault valueNote
$breadcrumb-font-sizenull
$breadcrumb-padding-y0
$breadcrumb-padding-x0
$breadcrumb-item-padding-x.5rem
$breadcrumb-margin-bottom1rem
$breadcrumb-bgnull
$breadcrumb-divider-colorproperty.get(ui-base-color-5)Requires @use "@library/sass/modules/property";
$breadcrumb-active-colorproperty.get(main-text-color)Requires @use "@library/sass/modules/property";
$breadcrumb-dividerquote("/")
$breadcrumb-divider-flipped$breadcrumb-divider
$breadcrumb-border-radiusnull

Make sure to read the Customize components and Understanding and using the design system guides.

{title}