====== Navigation Menus ======

Top-level menu items should be ''<a>'' links if they go directly to another page or route, and ''<button>'' if they contain a dropdown or trigger some other JavaScript-based action. The top level link text and caret indicator should be part of the same button, not separated. The button should use the ''aria-expanded'' attribute rather than ''aria-haspopup''. 

Within a dropdown menu, the containing element should have the ''[ngbDropdownMenu]'' directive, and the individual items should have the ''[ngbDropdownItem]'' directive. This allows the user to navigate within a submenu using the up and down arrow keys as well as the tab key. See the [[https://ng-bootstrap.github.io/#/components/dropdown/api#NgbDropdownMenu|ng-bootstrap documentation]].

===== ARIA for Navigation =====

==== ARIA Labels ==== 

When multiple landmarks have the same role, like multiple ''<nav>'' elements on one page, you can use [[accessibility:aria:acc_names|ARIA labels]] to give them unique and descriptive names, like "Main navigation" and "Search results pagination." Without labels, ''<nav>'' elements used for the main navigation, breadcrumbs, and pagination might all appear as “navigation” in the landmarks menu. 

[[https://github.com/w3c/aria-practices/issues/353|Navigation menus should not use the ARIA menu role]], which is intended for operating system menus.

==== aria-current ==== 

In navigation menus, including pagination links, the element containing the current page should include the ''aria-current="page"'' attribute. See [[https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current|aria-current documentation at MDN]] for more details.

**Further reading on navigation menus**

  * [[https://css-tricks.com/in-praise-of-the-unambiguous-click-menu/|In Praise of the Unambiguous Click Menu, Mark Root-Wiley]]
  * [[https://techhub.iodigital.com/articles/how-to-build-accessible-main-navigation|How to build accessible main navigation, Tim Dujardin]]
  * [[https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html|Don't Use ARIA Menu Roles for Site Nav, Adrian Roselli]]

See also: [[accessibility:pagination|Pagination]]