Skip to content

Breadcrumbs

Styles for breadcrumbs used in breadcrumbs module.

Structurally .breadcrumbs contains following elements:

  • .breadcrumbs__list
  • .breadcrumbs__list-item
  • .breadcrumbs__list-item-icon
  • .breadcrumbs__list-item-link

It also contains one class modifier:

  • .breadcrumbs__list-item-link_disabled

Example

Here is an example of breadcrumbs element usage. For presentation purposes we also use link styles here.

HTML
<nav class="breadcrumbs">
    <ol class="breadcrumbs__list">
        <li class="breadcrumbs__list-item">
            <a class="link breadcrumbs__list-item-link" href="/">Home page</a>
        </li>

        <li class="breadcrumbs__list-item">
            <svg class="icon breadcrumbs__list-item-icon">
                <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-right"></use>
            </svg>

            <a class="link breadcrumbs__list-item-link" href="/path/">Path</a>
        </li>

        <li class="breadcrumbs__list-item">
            <svg class="icon breadcrumbs__list-item-icon">
                <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-right"></use>
            </svg>

            <span class="link link_disabled breadcrumbs__list-item-link_disabled">Current page</span>
        </li>
    </ol>
</nav>

The .breadcrumbs classes were designed to be used with block elements like <nav>. However, you can use them with any other element and customize it to your own needs.

LESS

You can modify any breadcrumbs less variable in your User Less section to change a breadcrumbs styles.

Variables used to style breadcrumbs.

@breadcrumbsGap: 4px;

@breadcrumbsListItemCurrentPageLinkColor: @globalFontColor;

@breadcrumbsListItemIconStroke: @globalFontColorSecondary;

@breadcrumbsListItemLinkDisabledColor: @globalFontColor;
@breadcrumbsListItemLinkDisabledColorHover: @globalFontColor;

@breadCrumbsListItemFontSize: 12;
@breadCrumbsListItemLineHeight: 20;

If you want to change breadcrumbs styles, you can just change the variables. To change a default gap just modify @breadcrumbsGap variable.

@breadcrumbsGap: 10;

Here are standard breadcrumbs styles.

.breadcrumbs {
    &__list {
        display: flex;
        column-gap: @breadcrumbsGap;

        overflow-x: auto;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        scrollbar-width: none;

        white-space: nowrap;

        &::-webkit-scrollbar {
            display: none;
        }

        &-item {
            display: flex;
            align-items: center;
            column-gap: @breadcrumbsGap;

            .pixel-to-rem(font-size, @breadCrumbsListItemFontSize);
            .pixel-to-rem(line-height, @breadCrumbsListItemLineHeight);

            &[aria-current='page'] {
                scroll-snap-align: end;

                a {
                    pointer-events: none;
                    color: @breadcrumbsListItemCurrentPageLinkColor;
                }
            }
        }

        &-item-icon {
            stroke: @breadcrumbsListItemIconStroke;
        }

        &-item-link {
            text-decoration: none;

            &_disabled {
                color: @breadcrumbsListItemLinkDisabledColor;
                pointer-events: all;

                cursor: text;

                &:hover {
                    color: @breadcrumbsListItemLinkDisabledColorHover;
                }
            }
        }
    }
}

@media screen and (min-width: @breakPointXs) {
    .breadcrumbs {
        &__list {
            flex-wrap: wrap;

            &-item-link {
                word-break: break-word;
                white-space: normal;
            }
        }
    }
}

Styles reference

Modules reference