Behaviors
Interactions
Mouse
The Top Navigation element target areas span the full height of the bar. See the Style tab for detailed visual information about the various states.
Keyboard
Some users may use a keyboard to navigate your site. Starting focus in the main navigation lets them quickly navigate to other areas in your UI, but could block them from the main content if there is a large number of navigation items to tab through first.
Success Criterion 2.4.1 (Bypass Blocks) suggest bypassing these blocks by providing a “Skip to main” link at the start of the navigation’s focusable controls. This lets users easily skip the navigation region and begin interacting with the page’s main content area.
Responsive behavior
As the Top Navigation scales down to fit smaller screen sizes, menus should collapse into a left-panel hamburger menu. See the examples below to better understand the header’s responsive behavior.
If your UI includes a left panel, the Navigation actions should be added above the left panel items, pushing them down accordingly.
The Global actions located on the right side of the menu collabs into one button for more actions.
Content
Main Elements
Header name
The wordmark should be the name of the parent domain and be as brief as possible while giving the user a sense of place. The wordmark is always preceded by “MEWS” for MEWS products.
References
- Susan Farrell, Utility Navigation: What It Is and How to Design It (Nielsen Norman Group, 2015)
- WebAIM, “Skip Navigation” Links (2013)
- Web Content Accessibility Guidelines (W3C, 2018)