menubar

Роль строки меню, пункты которой всегда видны и расположены горизонтально как в программе.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировано

Самостоятельная роль виджета из WAI-ARIA для «настоящего» меню, в котором элементы всегда видны и расположены горизонтально. Ещё его называют строкой меню. Такое меню встретите в операционных системах и программах.

В HTML нет тега с этой ролью.

Как пишется

Скопировано

Задайте role="menubar" любому тегу, лучше <div>, <span> или <ul>.

Внутри контейнера с этой ролью должен быть минимум один пункт списка с menuitem, menuitemcheckbox или menuitemradio.

Не забудьте о навигации с клавиатуры по пунктам меню и поработайте над порядком фокуса. С этим помогут JavaScript и глобальный атрибут tabindex.

У роли menubar есть встроенное свойство aria-orientation="horizontal".

Для строки меню можно использовать все глобальные ARIA-атрибуты, ещё один атрибут виджета aria-disabled и атрибут связи aria-activedescendant.

Как это понять

Скопировано

Меню на сайтах обычно состоит из ссылок и для него достаточно использовать <ul>, вложенный в <nav>.

В классической, «настоящей» строке меню, как в компьютерной программе, обычно размещают часто используемые кнопки или другие элементы. Как раз для такого меню пригодится роль menubar.