Navigation

XL and LG Breakpoints

MD and SM Breakpoints

Search Bar

1. Main dropdown of navigation items contains the drawer of options. By selecting it, the user can display or collapse the mega menu.
2. Secondary nav items are specific first-level actions (single actions or a select).
3. Category title represents the main section of first-level options.
4. Page link is a group of link options that belong to a section or main category.
5. Additional link is a tertiary button that represents an extra action. When a main category has more than ten options or when there are more than five search results, a “See all” CTA will appear.
6. Page overlay appears when the top hat drawer is displayed. It is a page opacity-40 overlay.
7. Compact menu header is a label that creates a hook to explore the slide-in menu in compact view-ports.
8. Compact menu is a hamburger menu that contains the navigation in compact view-ports.
9. Back icon button allows users to go back to the previous menu view.
10. Contextual wayfinding title gives context on the section options being displayed.
11. Close icon button allows users to close the menu. When tapping it, the menu slides out.
12. Search input is the interactive element of the search bar, allowing users to enter data on a single line to search.
13. Search results sets the label of each result from the search.
14. Upper line defines the separation between top bars and top drawers. It is a 1px line.

When to Use

Use the top hat as a first level of navigation on a site.

When Not to Use

Don’t use the top hat to display the options of a specific category or page, as a second or third level of navigation. Use the nested nav instead.

Top Hat

Menu Dropdown

The caret-down items will trigger a full-bleed dropdown. The background page will have an opacity-40 Neutral 80 overlay. The menu animates down from the top. When collapsed, the menu uses the caret-down icon. When the menu dropdown is visible, the menu uses the caret-up icon. Animation guidance can be found the brand site.

Each column of content can have a title, list group of links, and an additional see all link.

SM and MD Slide-In Menu

The menu becomes a slide-in menu that drills down into lower levels. When open, the menu will go edge-to edge. This menu condenses all items under the hamburger menu. The first menu will list those items. The bar will also include a shift in copy-writing to allow more contextual direction for the user. Animation guidance can be found the brand site.

Intentional icon usage shows the user the expected action. Carets show a new slide-in and the direction they will appear from. An X icon is clicked or tapped to close a window. View the interactive prototype.

Spacing

Ensure that proper space is given between each item in the container.

Top hat XL: The menu is split into 6 even columns (2 columns of the 12 total columns of the grid each).

The menu is split into four even columns (three of the twelve total columns of the grid each). Five or more sections of content will flow underneath the top four with a 40px gap between rows.

Top hat MD:

Top hat SM:

Slide-in menu: MD and SM

Search bar: XL and LG

A proper hierarchy must be ensured for the elements that compose the top hat. The main accordion of the bar should contain the first-level options, where the titles represent each main section. The title, with the highest level of importance, needs to give a clear and short idea of the site it represents, and the options below it represent the pages it contains as a second level of navigation. The “See all” CTA should be a tertiary button placed at the bottom of the container.

Components within the container will be left-aligned, except for the secondary nav items of the top hat bar, which are right-aligned. The text and CTA of each block of the drawer are also left-aligned.

The top hat will adjust to the view-port size. The bar will keep its height across the view-port sizes.

Top Hat Bar

Search Bar