Компонент позволяет пользователю выбирать параметр или действие из контекстного списка. Для вызова раскрывающегося списка обычно используется кнопка с иконкой в виде трех точек. Иконка может быть переназначена на любую другую, а переключением между элементами списка можно управлять с клавиатуры.

§Структура

➊ Иконка вызова контекстного меню

➋ Элемент списка

➌ Разделитель

➍ Шеврон подменю

§Состояния

§Виды контента

§Размер

Иконка

По умолчанию иконка вызова контекстного меню имеет 4 встроенных размера:

S (24 x 24 px), M (28 x 28 px), L (36 x 36 px) и XL (44 x 44 px).

Ширина компонента

В тех случаях, когда элемент меню длиннее объекта, который его вызывает, меню будет увеличиваться до ширины самого длинного элемента в списке. Максимальная ширина компонента составляет 280 px. Если текст элемента меню выходит за пределы этой ширины, он будет обрезан с помощью многоточия.

§Применимость

Настраиваемая иконка вызова

Иконку вызова контекстного меню можно изменить по размеру или заменить на любую другую. По умолчанию в компоненте используется кнопка в виде трех точек с размером иконки 16 px.

Опциональная иконка элемента меню

Элементы контекстного меню могут содержать иконки для улучшения понимания. По умолчанию размер иконки в контекстном меню составляет 16x16 px.

Вложенные выпадающие подменю

Элементы контекстного меню могут быть вложены друг в друга. По умолчанию вложенность поддерживается до 3 уровней в глубину.

Расположение

По умолчанию выпадающее меню открывается под элементом, который его вызывает, а иконка меню находится в правом углу. Если в интерфейсе нет возможности отрисовать раскрывающийся список под иконкой переключателя, список раскрывается над иконкой.

Закрытие контекстного меню

Контекстное меню можно закрыть, щелкнув за его пределами или с помощью клавиши Esc. При скролле страницы меню скрывается (опционально, это поведение можно отключить).

§Рекомендации

Выпадающие меню используются, когда у вас есть выбор как минимум из двух вариантов. Оптимальное количество вариантов — от 5 до 10.

При организации элементов меню соблюдайте логический порядок, размещая наиболее востребованные и популярные варианты вверху. Тестируйте различные элементы меню и дорабатывайте их по мере необходимости.