Кебаб-меню Kebab-menu

Кебаб-меню содержит действия с объектом.

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

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

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

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

Если одно-два действия важнее и чаще используются — оставьте их рядом с меню.

Описание работы

Показывайте меню на странице постоянно, а не только по наведению.

При клике на меню появляется раскрывающийся список. Направления открывания списка: вправо вниз, влево вниз, вправо вверх, влево вверх. Иконка открытого списка подсвечена серым кругом.

При клике в любом месте за пределами меню оно закрывается. Открытый список не блокирует скролл и нажатия на другие контролы на странице.

Вариант-максимум — при клике правой кнопкой мыши по элементу открывайте кебаб-меню вместо контекстного меню браузера. Меню возникает из того места, куда кликнул пользователь.

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

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

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

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

Дизайн

Используйте для меню символ из шрифта Kontur Iconic.

Кебаб-меню бывает двух размеров — 14 px и 20 px. Используйте большой кебаб в таблицах и крупных списках.

Маркер наведения — черный круг #000 с прозрачностью 9 %. Прозрачный черный круг одинаково контрастно выглядит на разных фонах.