A
<button aria-expanded> that shows and hides a plain list of <a> links (the disclosure pattern)Site navigation is a set of links, so the simple disclosure pattern fits. A button with aria-expanded shows or hides a list of normal links. Users Tab through them as usual.role="menu" is the tempting wrong answer. It is meant for app-style menus, like a text editor's File menu. It tells screen reader users to expect arrow-key navigation and other menu keys, and it hides the fact that the items are links. Using it on site navigation usually makes things worse. A hover-only div fails keyboard and touch users.