Кнопка-меню Dropdown

Используйте кнопку-меню:

• когда не хватает места для нескольких кнопок;
• когда названия действий очень длинные;
• когда действия редко используются или объединены по смыслу.

Название кнопки-меню пишется с заглавной буквы.

Кнопка-меню может называться инфинитивом в совершенной форме. В таком случае названия действий в меню должны продолжать название кнопки, чтобы получалось законченное словосочетание. Например, «Добавить счёт-фактуру»:

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

Смотрите описание иконки у обычной кнопки.

Кроме иконки в названии кнопки, иконки могут быть у самых важных команд в меню:

Если подходящей метафоры нет, оставьте пункт без иконки. Лучше не ставить «какую-то» иконку, это может запутать пользователя.

Существует 3 стандартных размера кнопки-меню. Подробнее смотрите в гайде кнопки.

Ширина кнопки задаётся размером текста внутри неё и стандартными отступами. Нельзя менять отступы, в отличие от раскрывающегося списка.

Неправильно

Правильно

Раскрывающееся меню не может быть меньше кнопки по ширине.

Неправильно

Правильно

Красиво, когда меню шире кнопки на 24 — 40 px.

Ширина раскрывающегося меню зависит от размера пунктов — если текст длинный, меню становится шире, но не больше 440 px. Если текст пункта не входит в 440 px, он переносится на новую строку.

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

Исключение, когда список может открываться вверх — если кнопка-меню располагается на терминальной плашке внизу страницы.

При переходе к меню клавишей Tab кнопка-меню получает фокус — появляется чёрная рамка:

Если нажать клавишу Enter — меню откроется и первый пункт получит фокус:

Клавиши ↓ ↑ переводят фокус между строками списка. Переход между строками не цикличен — с последней строки фокус не переходит на первую, как и с первой на последнюю.

Клавиша Enter выполняет выбранное действие.

Клавиша Esc закрывает меню.

Кнопка-меню выглядит как кнопка, но у кнопки-меню всегда есть иконка стрелки справа.

При необходимости в список команд можно добавлять разделители и заголовки. Заголовок не нажимается и при наведении не подсвечивается.

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

Неправильно

Правильно

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

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