Breadcrumbs

Breadcrumbs are a type of navigation that show your current location on the app or website.

HTML

<nav aria-label="Breadcrumb">
    <ol class="mdf-breadcrumbs">
        <li class="mdf-breadcrumbs__item">
            <a href="/">Home</a>
        </li>

        <li class="mdf-breadcrumbs__item mdf-breadcrumbs__item--active">
            Breadcrumbs
        </li>
    </ol>
</nav>

Sass

// Include default styles without configuration
@forward '@miraidesigns/breadcrumbs/styles';

// Configure appearance
@use '@miraidesigns/breadcrumbs' with (
    $variable: value
);

@include breadcrumbs.styles();

Attributes

Please see the WAI-ARIA page for attributes and best practices regarding breadcrumbs.

Classes

| Name | Type | Description | | ------------------------------- | -------- | ------------------------------------------------------- | | mdf-breadcrumbs | Parent | Contains the breadcrumb elements | | mdf-breadcrumbs__item | Child | Breadcrumb navigation item. Child to .mdf-breadcrumbs | | mdf-breadcrumbs__item--active | Modifier | Set navigation item as active (current page) |