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

Пример

HTML

<nav aria-label="Основные разделы">
  <ul class="sf-menu max-w-sm">
    <li class="sf-menu-item">
      <a class="sf-menu-element" href="#home" aria-current="page">Главная</a>
    </li>
    <li class="sf-menu-item open">
      Каталог
      <ul class="sf-menu">
        <li class="sf-menu-item">
          <a class="sf-menu-element" href="#services">Услуги</a>
        </li>
        <li class="sf-menu-item">
          <a class="sf-menu-element" href="#products">Продукты</a>
        </li>
      </ul>
    </li>
    <li class="sf-menu-item">
      <a class="sf-menu-element" href="#contacts">Контакты</a>
    </li>
  </ul>
</nav>

Разметка

Минимальную разметку показывает пример выше: список <ul class="sf-menu"> внутри <nav> с aria-label, пункты <li class="sf-menu-item">.

Обычный пункт содержит ссылку <a class="sf-menu-element">.
Ветка — пункт с вложенным <ul class="sf-menu"> и текстом подписи прямо в <li>. Скрипт превращает подпись в кнопку раскрытия sf-menu-element со стрелкой, связывает её с подменю через aria-expanded и aria-controls и прячет закрытое подменю.
Скрипт оборачивает подпись в sf-menu-element-wrap и sf-menu-element-text и ставит уровень sf-menu-element--level-1 … --level-4; писать эти классы вручную не нужно.
Атрибуты пункта: icon="имя" — иконка перед подписью, trailing-icon="имя" — своя иконка вместо стрелки ветки, text="Текст" — подпись, если её нет в разметке.
Loader подключает меню по классу sf-menu вместе с иконками и кнопками с иконкой. Публичных методов и событий у компонента нет: состояние задаёт разметка.

Варианты

Вид

Без модификатора меню вертикальное — для боковой панели, каталога, настроек. sf-menu--horizontal выстраивает первый уровень строкой — для основных разделов в шапке; ставьте его только корневому списку. sf-menu--documentation-tree — компактное дерево без рамок с отступом по уровню, для навигации по документации.

HTML

<div class="grid grid-col-1 md:grid-col-3 gap-4 items-cross-start">
  <div class="flex flex-col gap-1">
    <nav aria-label="Вертикальное меню">
      <ul class="sf-menu">
        <li class="sf-menu-item"><a class="sf-menu-element" href="#v-home">Главная</a></li>
        <li class="sf-menu-item"><a class="sf-menu-element" href="#v-news">Новости</a></li>
        <li class="sf-menu-item"><a class="sf-menu-element" href="#v-contacts">Контакты</a></li>
      </ul>
    </nav>
    <code class="text-1/2 color-on-surface-variant">sf-menu</code>
  </div>
  <div class="flex flex-col gap-1">
    <nav aria-label="Горизонтальное меню">
      <ul class="sf-menu sf-menu--horizontal">
        <li class="sf-menu-item"><a class="sf-menu-element" href="#h-home">Главная</a></li>
        <li class="sf-menu-item"><a class="sf-menu-element" href="#h-news">Новости</a></li>
      </ul>
    </nav>
    <code class="text-1/2 color-on-surface-variant">sf-menu sf-menu--horizontal</code>
  </div>
  <div class="flex flex-col gap-1">
    <nav aria-label="Дерево документации">
      <ul class="sf-menu sf-menu--documentation-tree">
        <li class="sf-menu-item open">
          Руководство
          <ul class="sf-menu">
            <li class="sf-menu-item"><a class="sf-menu-element" href="#d-install">Установка</a></li>
            <li class="sf-menu-item"><a class="sf-menu-element" href="#d-themes">Темы</a></li>
          </ul>
        </li>
        <li class="sf-menu-item"><a class="sf-menu-element" href="#d-api">API</a></li>
      </ul>
    </nav>
    <code class="text-1/2 color-on-surface-variant">sf-menu sf-menu--documentation-tree</code>
  </div>
</div>

Подменю горизонтального меню

В горизонтальном меню подменю первого уровня открывается вниз, следующие — в сторону; внутри все подменю вертикальные. Подменю, которое не помещается у края экрана, сдвигается в свободную сторону. Открытие одного верхнего раздела закрывает соседний, щелчок вне меню закрывает открытую ветку. При письме справа налево направление раскрытия меняется само: оно задано логическими сторонами. Пункты горизонтального меню не переносятся на вторую строку: на узком экране показывайте те же пункты вертикальным меню в выдвижной панели.

HTML

<nav class="sf-menu-example-stage" aria-label="Разделы сайта">
  <ul class="sf-menu sf-menu--horizontal">
    <li class="sf-menu-item">
      <a class="sf-menu-element" href="#about">О компании</a>
    </li>
    <li class="sf-menu-item">
      Каталог
      <ul class="sf-menu">
        <li class="sf-menu-item">
          <a class="sf-menu-element" href="#solutions">Решения</a>
        </li>
        <li class="sf-menu-item">
          Продукты
          <ul class="sf-menu">
            <li class="sf-menu-item">
              <a class="sf-menu-element" href="#framework">SIMAI Framework</a>
            </li>
            <li class="sf-menu-item">
              <a class="sf-menu-element" href="#docara">Docara</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sf-menu-item">
      <a class="sf-menu-element" href="#contacts">Контакты</a>
    </li>
  </ul>
</nav>

Уровни вложенности

Подменю — вложенный список sf-menu. Скрипт различает четыре уровня, пятый и глубже оформляются как четвёртый; более глубокую структуру разделите на несколько страниц или меню.

HTML

<nav aria-label="Разделы проекта">
  <ul class="sf-menu max-w-sm">
    <li class="sf-menu-item open">
      Проект
      <ul class="sf-menu">
        <li class="sf-menu-item open">
          Документы
          <ul class="sf-menu">
            <li class="sf-menu-item open">
              Руководства
              <ul class="sf-menu">
                <li class="sf-menu-item">
                  <a class="sf-menu-element" href="#start">Начало работы</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Иконки

icon ставит иконку перед подписью пункта или ветки. trailing-icon заменяет стрелку ветки своей иконкой.

HTML

<div class="grid grid-col-1 md:grid-col-2 gap-4 items-cross-start">
  <div class="flex flex-col gap-1">
    <nav aria-label="Меню с иконками">
      <ul class="sf-menu">
        <li class="sf-menu-item" icon="home"><a class="sf-menu-element" href="#i-home">Главная</a></li>
        <li class="sf-menu-item" icon="settings"><a class="sf-menu-element" href="#i-settings">Настройки</a></li>
      </ul>
    </nav>
    <code class="text-1/2 color-on-surface-variant">icon="home"</code>
  </div>
  <div class="flex flex-col gap-1">
    <nav aria-label="Ветка со своей стрелкой">
      <ul class="sf-menu">
        <li class="sf-menu-item" icon="folder" trailing-icon="add">
          Проекты
          <ul class="sf-menu">
            <li class="sf-menu-item"><a class="sf-menu-element" href="#i-site">Сайт</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    <code class="text-1/2 color-on-surface-variant">trailing-icon="add"</code>
  </div>
</div>

Состояния

Текущий пункт

Ссылке текущей страницы добавьте aria-current="page". Дерево документации sf-menu--documentation-tree выделяет такой пункт фоном и начертанием; вертикальное и горизонтальное меню его не выделяют, атрибут нужен экранному диктору.

HTML

<div class="grid grid-col-1 md:grid-col-2 gap-4 items-cross-start">
  <div class="flex flex-col gap-1">
    <nav aria-label="Текущий пункт в дереве документации">
      <ul class="sf-menu sf-menu--documentation-tree">
        <li class="sf-menu-item"><a class="sf-menu-element" href="#c-install">Установка</a></li>
        <li class="sf-menu-item"><a class="sf-menu-element" href="#c-themes" aria-current="page">Темы</a></li>
        <li class="sf-menu-item"><a class="sf-menu-element" href="#c-api">API</a></li>
      </ul>
    </nav>
    <code class="text-1/2 color-on-surface-variant">sf-menu--documentation-tree, aria-current="page"</code>
  </div>
  <div class="flex flex-col gap-1">
    <nav aria-label="Текущий пункт в вертикальном меню">
      <ul class="sf-menu">
        <li class="sf-menu-item"><a class="sf-menu-element" href="#c-home">Главная</a></li>
        <li class="sf-menu-item"><a class="sf-menu-element" href="#c-news" aria-current="page">Новости</a></li>
      </ul>
    </nav>
    <code class="text-1/2 color-on-surface-variant">sf-menu, aria-current="page"</code>
  </div>
</div>

Открытая и недоступная ветка

Класс open на пункте-ветке открывает подменю при загрузке; дальше его переключает скрипт. Атрибут или класс disabled на ветке запрещает её раскрывать и приглушает подпись. Недоступную ссылку лучше убрать из навигации.

HTML

<nav aria-label="Меню со состояниями">
  <ul class="sf-menu max-w-sm">
    <li class="sf-menu-item">
      <a class="sf-menu-element" href="#overview" aria-current="page">Обзор</a>
    </li>
    <li class="sf-menu-item open">
      Открытая ветка
      <ul class="sf-menu">
        <li class="sf-menu-item">
          <a class="sf-menu-element" href="#details">Подробности</a>
        </li>
      </ul>
    </li>
    <li class="sf-menu-item" disabled>
      Недоступная ветка
      <ul class="sf-menu">
        <li class="sf-menu-item">
          <a class="sf-menu-element" href="#later">Будущий раздел</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Доступность

Оборачивайте меню в <nav> с aria-label или aria-labelledby. Не ставьте role="menu": навигация остаётся списком ссылок.
Ветка — кнопка с aria-expanded и aria-controls; скрипт держит их в актуальном состоянии.
Текущей странице — aria-current="page".

Клавиша	Результат
`Enter` или `Пробел` на ветке	Открывает или закрывает подменю
`Escape` в горизонтальном меню	Закрывает текущую ветку и возвращает фокус на её кнопку
`Tab`	Переходит по ссылкам и веткам по порядку

Классы

Что	Классы
Блок	`sf-menu`
Части	`sf-menu-element`, `sf-menu-element--level-1`, `sf-menu-element--level-2`, `sf-menu-element--level-3`, `sf-menu-element--level-4`, `sf-menu-element-icon`, `sf-menu-element-text`, `sf-menu-element-wrap`, `sf-menu-item`
Модификаторы	`sf-menu--documentation-tree`, `sf-menu--horizontal`

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

Переменные

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

Переменная	По умолчанию	Задаёт
`--sf-menu--gap`	не задана; задают модификаторы, например `.sf-menu.sf-menu--documentation-tree`: `var(--sf-space-1/4)`	`gap`
`--sf-menu-element--background-color`	не задана; задают модификаторы, например `.sf-menu-element`: `var(--sf-transparent)`	`background-color`
`--sf-menu-element--border-color`	не задана; задают модификаторы, например `.sf-menu-element`: `var(--sf-surface-container)`	`border-color`
`--sf-menu-element--border-width`	не задана; задают модификаторы, например `.sf-menu-element`: `var(--sf-px)`	`padding-top`, `padding-block-start`, `padding-bottom`, `padding-block-end`, `border-top-width`, `border-block-start-width`, `border-bottom-width`, `border-block-end-width`, `border-inline-start-width`, `border-inline-end-width`
`--sf-menu-element--color`	не задана; задают модификаторы, например `.sf-menu-element`: `var(--sf-on-surface)`	`color`
`--sf-menu-element--gap`	не задана; задают модификаторы, например `.sf-menu-element`: `var(--sf-space-1/3)`	`gap`
`--sf-menu-element--padding-bottom`	не задана; задают модификаторы, например `.sf-menu.sf-menu--documentation-tree .sf-menu-element`: `var(--sf-0)`	`padding-bottom`, `padding-block-end`
`--sf-menu-element--padding-inline-start`	не задана; задают модификаторы, например `.sf-menu-element--level-1`: `var(--sf-space-1)`	`padding-inline-start`
`--sf-menu-element--padding-right`	не задана; задают модификаторы, например `.sf-menu.sf-menu--documentation-tree .sf-menu-element`: `var(--sf-0)`	`padding-inline-end`
`--sf-menu-element--padding-top`	не задана; задают модификаторы, например `.sf-menu.sf-menu--documentation-tree .sf-menu-element`: `var(--sf-0)`	`padding-top`, `padding-block-start`
`--sf-menu-element--radius`	не задана; задают модификаторы, например `.sf-menu-element`: `var(--sf-radius--ui)`	`border-start-start-radius`, `border-start-end-radius`, `border-end-start-radius`, `border-end-end-radius`
`--sf-menu-item--background-color`	не задана; задают модификаторы, например `.sf-menu .sf-menu-item`: `transparent`	`background-color`
`--sf-menu-item--gap`	не задана; задают модификаторы, например `.sf-menu .sf-menu-item`: `var(--sf-space-1/3)`	`gap`

Навигация

Главное

Документация

Содержание

Меню

Пример

Разметка

Варианты

Вид

Подменю горизонтального меню

Уровни вложенности

Иконки

Состояния

Текущий пункт

Открытая и недоступная ветка

Доступность

Классы

Переменные

См. также

Настройки

Меню

Пример

Разметка

Варианты

Вид

Подменю горизонтального меню

Уровни вложенности

Иконки

Состояния

Текущий пункт

Открытая и недоступная ветка

Доступность

Классы

Переменные

См. также

Поиск по документации