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

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

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

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

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

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

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

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

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

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

Не разделяйте кнопку-меню на две части — это запутывает пользователя: не всем очевидно, что это два разных действия.

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

Раскрывающееся меню не может быть по ширине меньше кнопки. Красиво, когда меню шире кнопки на 30–40 px.

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

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

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

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

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

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

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

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

Внешне кнопка-меню похожа на раскрывающийся список. Есть три отличия:

• может использоваться иконка, как в обычной кнопке;
• между названием и стрелкой не может быть большого отступа;
• радиус скругления — как у обычной кнопки.

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

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

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