Each of the two design system options approaches the primary navigation differently.
Mega Menu
A “mega menu” is typically a large-format menu, activated by either hovering your cursor over or clicking on a primary navigation element. Once the mega menu opens, there is room to display a collection of links within the section, as well as a highlight. Highlight areas can be used to feature a particular page, add some additional context to the section the user is viewing or promote an important call to action. In our Option 1 example, we are using the highlight to provide some additional insight into the purpose of the About section.
Mobile-Centric
Mobile users, as a percentage of all traffic, is equal to that of desktop users. On some sites, more traffic comes from mobile than desktop and tablet combined. We expect to see the traffic share of mobile visits continue to increase. For Option 2, we have adopted a mobile-centric menu system. Regardless of device or screen size, users will see the “burger menu” (three horizontal lines, stacked vertically, which is vaguely reminiscent of the bun/meat/bun arrangement of a hamburger). The icon is also accompanied by the word “menu,” for clarity. Clicking on this menu icon will slide open a compact, small-screen-friendly menu system.
Once we select a design direction, we will conduct focus groups and user testing sessions to further refine our design. If you have an interest in participating in one of our test groups, please let us know.