Оглавление

Оглавление показывает разделы длинной страницы списком якорных ссылок и отмечает текущий раздел. Для навигации между страницами берите меню или хлебные крошки.

Пример

<nav class="sf-outline" aria-label="Содержание страницы">
  <ul class="sf-outline__list">
    <li><a class="sf-outline__link" href="#outline-overview" aria-current="location">Обзор</a></li>
    <li>
      <a class="sf-outline__link" href="#outline-usage">Применение</a>
      <ul class="sf-outline__list">
        <li><a class="sf-outline__link" href="#outline-variants">Варианты</a></li>
        <li><a class="sf-outline__link" href="#outline-accessibility">Доступность</a></li>
      </ul>
    </li>
    <li><a class="sf-outline__link" href="#outline-api">JavaScript</a></li>
  </ul>
</nav>

Разметка

Минимальную разметку показывает пример выше. Части вложены так: nav.sf-outline → список ul.sf-outline__list → li → ссылка sf-outline__link; вложенный ul.sf-outline__list внутри li даёт следующий уровень с отступом.

• Корень — <nav> с доступным именем: он отделяет оглавление от основной навигации сайта.
• Уровень списка повторяет уровень заголовка: h2 — первый уровень, h3 — вложенный. Не пропускайте уровни ради отступа.
• Ссылка ведёт на id заголовка (href="#install").
• Компонент работает без JavaScript: текущий раздел отмечает приложение.

Состояния

Текущий раздел

Ссылка с aria-current="location" получает полосу основного цвета в начале строки, заливку и среднее начертание. Ставьте его ровно одной ссылке — на раздел, который сейчас на экране; атрибут data-sf-outline-active оформляет ссылку так же, но экранный диктор его не объявляет.

<div class="grid grid-col-1 md:grid-col-2 gap-4">
  <div class="flex flex-col gap-1">
    <nav class="sf-outline" aria-label="Обычная ссылка">
      <ul class="sf-outline__list"><li><a class="sf-outline__link" href="#outline-state-plain">Установка</a></li></ul>
    </nav>
    <code class="text-1/2 color-on-surface-variant">без aria-current</code>
  </div>
  <div class="flex flex-col gap-1">
    <nav class="sf-outline" aria-label="Текущий раздел">
      <ul class="sf-outline__list"><li><a class="sf-outline__link" href="#outline-state-current" aria-current="location">Установка</a></li></ul>
    </nav>
    <code class="text-1/2 color-on-surface-variant">aria-current="location"</code>
  </div>
</div>

Фокус

При переходе клавишей Tab ссылка получает кольцо фокуса по :focus-visible. В примере фокус показан классом focus-visible, который CSS компонента читает наравне с :focus-visible.

<nav class="sf-outline" aria-label="Ссылка в фокусе">
  <ul class="sf-outline__list"><li><a class="sf-outline__link focus-visible" href="#outline-state-focus">Установка</a></li></ul>
</nav>

Доступность

• nav с aria-label («Содержание страницы») отличает оглавление от других областей навигации.
• Текущий раздел отмечает aria-current="location": экранный диктор объявляет его, а не только цвет.
• Порядок ссылок совпадает с порядком заголовков на странице.
• Полоса текущего раздела стоит в логическом начале строки и зеркалится при письме справа налево.

Классы

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-outline); переменную без него задают только модификаторы.

См. также

• Полоса прокрутки