G012B Global Header Navigation Fly-out Menu

Component Detail

As a supplemental component to the G001, the G012B Global Header Navigation Fly-out Menu allows authors with administrative privileges to create a robust 4-column fly-out menu, which is typically used to reveal first- and second-level product categories from each platform’s product taxonomy.

The first column (furthest left) can hold up to 10 items with categories that have less than approximately 50 characters per item. When items have longer character counts, they will wrap to two lines and require a re-evaluation of the number of items available to display.

For the second and third columns, the same rules apply — aim for roughly 9-10 items per column max (18-20 total). However, if you have fewer items, the columns will balance so that if you have 6 items, for example, then 3 items each will appear in the second and third columns.

The fourth column is typically associated with product category brands and follow the same limitations as the first column. Authors may add up to two eSpots at the bottom of this menu type.

Interactions

For desktop, on hover, the fly-out menu reveals additional links. For mobile, on tap, the fly-out reveals additional links.

While menu items should link users to associated child pages within the corresponding menu taxonomy, Text CTAs should drive uses to more top-level category or relevant support pages when applicable.