Навигационная цепочка

breadcum
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно создавать навигационную цепочку

Описание

Указывает расположение текущей страницы в навигационной иерархии.

  1. Главная
  1. Главная
  2. UI
  1. Главная
  2. UI
  3. Компоненты
<ol class="flex flex-wrap color-on-surface list-none">
  <li class="color-inherit">Главная</li>
</ol>
<ol class="flex flex-wrap color-on-surface list-none">
  <li class="color-inherit">
    <a href="/ru/">Главная</a>
  </li>
  <li class="p-left-1/3 before:content-icon before:p-right-1/3 slash-forward">UI</li>
</ol>
<ol class="flex flex-wrap color-on-surface list-none">
  <li class="color-inherit">
    <a href="/ru/">Главная</a>
  </li>
  <li class="p-left-1/3 before:content-icon before:p-right-1/3 slash-forward">
    <a href="/ru/ui/">UI</a>
  </li>
  <li class="p-left-1/3 before:content-icon before:p-right-1/3 slash-forward">Компоненты</li>
</ol>
  1. Главная
  1. Главная
  2. UI
  1. Главная
  2. UI
  3. Компоненты
<ol class="flex flex-wrap color-on-surface list-none">
  <li class="color-inherit">Главная</li>
</ol>
<ol class="flex flex-wrap color-on-surface list-none">
  <li class="color-inherit">
    <a href="/ru/">Главная</a>
  </li>
  <li class="p-left-1/3 before:content-icon before:p-right-1/3 hyphen">UI</li>
</ol>
<ol class="flex flex-wrap color-on-surface list-none">
  <li class="color-inherit">
    <a href="/ru/">Главная</a>
  </li>
  <li class="p-left-1/3 before:content-icon before:p-right-1/3 hyphen">
    <a href="/ru/ui/">UI</a>
  </li>
  <li class="p-left-1/3 before:content-icon before:p-right-1/3 hyphen">Компоненты</li>
</ol>

Подобно нашим навигационным компонентам, навигационная цепочка хорошо работает с или без использования списка разметки.

<nav class='flex flex-wrap color-on-surface list-none'>
  <a class='m-right-1/3' href='/ru/'>Главная</a>
  <a class='m-right-1/3' href='/ru/ui/'>UI</a>
  <a class='m-right-1/3' href='/ru/ui/component/'>Компоненты</a>
  <span class='m-right-1/3'>Навигационная цепочка</span>
</nav>

Адаптивность

Для установки адаптивности навигационной цепочки, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью