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.

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