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

Кнопка-меню содержит несколько команд, объединенных по смыслу.

Добавить
Счет-фактуру
Акт
Накладную

Создать в редакторе
Несколько отдельных вариантов
С пояснением, как работает
Почти последний

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

Когда использовать

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

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

Название

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

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

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

Иконка

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

Работа с клавиатурой

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

Валидация

Кнопка-меню не может быть неправильной или обязательной для нажатия, поэтому не может быть провалидирована.

Дизайн

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

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

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

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

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

Фокус

Цвет

Размер, расположение

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

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

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

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

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