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: 'Тарифы' },
]} />

Prop name	Type	Default	Description
className	string \| undefined		Дополнительный класс корневого элемента
items*	ItemType[]		Список элементов
color	TextColorType \| undefined	default	Цвет
hasMicrodata	boolean \| undefined	false	Включить микроразметку
disabledOnMobile	boolean \| undefined	false	Отключить на разрешении < 768 px
hasMarginTop	boolean \| undefined	false	Отступ сверху
classes	{ item?: string \| undefined; itemTitle?: string \| undefined; lastItemTitle?: string \| undefined; link?: string \| undefined; } \| undefined	{}	Дополнительные классы для корневого и внутренних элементов
dataAttrs	{ root?: Record<string, string> \| undefined; item?: Record<string, string> \| undefined; itemInner?: Record<string, string> \| undefined; itemTitle?: Record<...> \| undefined; itemMeta?: Record<...> \| undefined; link?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам