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

Кебаб-меню — это список действий с объектом.

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

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

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

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

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

Модальное окно «Сотрудники»: в каждой строке списка справа иконка карандаша, а рядом с ней кебаб-меню

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

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

Четыре открытых кебаб-меню с пунктами «Переименовать», «Дублировать», «Переместить», «Удалить»: список раскрывается от кнопки вниз или вверх, вправо или влево

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

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

Модальное окно «Сотрудники»: меню строки «Кравченко Александр Иванович» открыто не от кебаба справа, а посреди строки поверх имени; в меню «Переименовать», «Дублировать», «Переместить», «Удалить»

Дизайн

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

Кебаб-меню может быть трёх размеров. Используйте большой кебаб в таблицах и крупных списках.

Кебаб трёх размеров сверху вниз: маленький, средний и большой

Доступность

Управление клавиатурой

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

Кебаб в фокусе — вокруг кнопки с тремя точками чёрная круглая рамка

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

Открытое кебаб-меню: первый пункт «Переименовать» в фокусе и выделен серым, ниже «Дублировать», «Переместить», «Удалить»

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

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

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