Navigation

Global navigation, also known as MegaNav, is a panel showing groups of navigation options all at once via a column structure. It includes a nested drop-down menu divided into groups by categories showing relationships between items. It also includes the Spotlight Banner component.

Navigation /beacon/img/navigation/navigation-primary.png

Variations

Usage

MegaNav is a standard global pattern that is used for large sites with large amounts of content and includes: panel/container, links, menus/lists/levels of navigation, business unit name/logo, and spotlight. By default, there are 3 levels of navigation: L1, L2, L3. The MegaNav, in most cases, isn’t modified by designers. However, there are some areas of flexibility, including:

  • Removing levels of navigation, e.g. having only L1 and L2 sections, and no L3 sections. Note: styling will change so that the L2s are clickable and aren’t capped.
  • The number of L3 links in a panel.
  • Business unit logo.
Navigation /beacon/img/navigation/navigation-panel.png

Spotlight Banner component

Five Spotlight banner examples

The Spotlight is positioned on the right-most column by default, for ads/promotions. It can be positioned on the left-most column for copy that introduces, or briefly describes a section. You can also hide/turn off the Spotlight component.

Best practices

Do

  • Use concise heading labels and clearly describe the category. Links should clearly describe where the user is going if they click the link.
  • L2s and L3s should Limit to 3 words if possible. L1 one or two words.
  • Organize the content hierarchy- position the most important content at the top of the lists.
  • Consider how the nav will transform on mobile.
  • Aim for content balance and consistency between L1s.

Don’t

  • Duplicate content from L2 to L3.
  • Create lists without a clear structure or organization.

Accessibility

Ensure all content text and background colors meet accessibility requirements on Color guidelines. Visually and programmatically relay states (expand/collapse) to the user. Relay keyboard interaction instructions to the screen reader user. Ensure all controls are keyboard focusable and recognized by assistive technologies and add a role when necessary. Use descriptive labels. Follow best practices on links and Schwab Accessibility guidelines.