Figma

Breadcrumbs

import { Breadcrumbs } from '@megafon/ui-shared';

Базовое использование

Массив объектов

Каждый элемент массива содержит свойства title и href, которые используются для создания ссылки с помощью компонента TextLink из @megafon/ui-core.

<Breadcrumbs 
    items={[
        { title: 'Главная', href: 'www.megafon.ru' },
        { title: 'Каталог услуг', href: 'www.megafon.ru' },
        { title: 'Тарифы' },
]} />

Массив компонентов

Каждый элемент массива является самостоятельным компонентом.

<Breadcrumbs 
  items={[
      <a href="www.megafon.ru">Главная</a>,
      <a href="www.megafon.ru">Каталог услуг</a>,
      <span>Тарифы</span>,
]} />

C микроразметкой

<Breadcrumbs hasMicrodata 
    items={[
        { title: 'Главная', href: 'www.megafon.ru' },
        { title: 'Каталог услуг', href: 'www.megafon.ru' },
        { title: 'Тарифы' },
]} />

Итоговая верстка
<div
  class="mfui-breadcrumbs mfui-breadcrumbs_color_default"
  itemscope=""
  itemtype="https://schema.org/BreadcrumbList"
>
  <div class="mfui-breadcrumbs__item">
    <div
      class="mfui-breadcrumbs-item"
      itemscope=""
      itemprop="itemListElement"
      itemtype="https://schema.org/ListItem"
    >
      <a
        class="mfui-text-link mfui-text-link_underline-visibility_hover mfui-text-link_underline-style_solid mfui-text-link_color_default"
        href="www.megafon.ru"
        itemprop="item"
      >
        <span itemprop="name">Главная</span>
      </a>
      <meta itemprop="position" content="1" />
    </div>
  </div>
  <div class="mfui-breadcrumbs__item">
    <div
      class="mfui-breadcrumbs-item"
      itemscope=""
      itemprop="itemListElement"
      itemtype="https://schema.org/ListItem"
    >
      <a
        class="mfui-text-link mfui-text-link_underline-visibility_hover mfui-text-link_underline-style_solid mfui-text-link_color_default"
        href="www.megafon.ru"
        itemprop="item"
        >
          <span itemprop="name">Каталог услуг</span>
      </a>
      <meta itemprop="position" content="2" />
    </div>
  </div>
  <div class="mfui-breadcrumbs__item">
    <div class="mfui-breadcrumbs-item mfui-breadcrumbs-item_color_default">
      <span>Тарифы</span>
    </div>
  </div>
</div>

С отступом сверху и скрытием на разрешении < 768 px

<Breadcrumbs hasMarginTop disabledOnMobile
    items={[
        { title: 'Главная', href: 'www.megafon.ru' },
        { title: 'Каталог услуг', href: 'www.megafon.ru' },
        { title: 'Тарифы' },
]} />