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 ng-bootstrap documentation.

When multiple landmarks have the same role, like multiple <nav> elements on one page, you can use 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.

Navigation menus should not use the ARIA menu role, which is intended for operating system menus.

In navigation menus, including pagination links, the element containing the current page should include the aria-current="page" attribute. See aria-current documentation at MDN for more details.

Further reading on navigation menus

• In Praise of the Unambiguous Click Menu, Mark Root-Wiley
• How to build accessible main navigation, Tim Dujardin
• Don't Use ARIA Menu Roles for Site Nav, Adrian Roselli

See also: Pagination