Full Menu

Users can access all navigation links on a site with the Full Menu. It slides in from the left when opened.

Dos

Use for overflow, top-level links that don’t fit in the main navigation

Carefully prioritize your top-level links and consider your information architecture to section site content

Variations

Shows top-level menu items, including menu items from the main navigation in the site header. Can also include additional links, such as utility items. Includes a link to the search.

Open in a new window

Accessibility

Keyboard Accessible

Users are able to use the keyboard to navigate through focusable content using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ to activate. WCAG 2.1.1: Keyboard This navigation is done in sequential and logical order. WCAG 2.4.3: Focus Order

Hover and Focus State:

The actionable items each have distinctive styling on hover/focus to provide a visual cue to the user that the element is focused and there is an action that can be taken. WCAG 1.4.13: Content on hover or focus

Color Contrast

A contrast ratio of at least 4:5:1 between text and background color is ensured to enhance readability. WCAG 1.4.3: Contrast (minimum)

Responsive Design

The component scales in relation to the to the screen size to prevent truncating content and reflows properly when zoomed up to 200% without horizontal scrolling WCAG 1.4.10: Reflow

Consistent

Styles are applied consistently including line height, font style, weight, spacing and color of text. WCAG 1.4.12: Text Spacing

Title

Use a clear and concise title that describes the pathway content WCAG 2.4.6: Headings and Labels

Layout

Chevrons appear next to items with child pages, and users can navigate through all levels by clicking on the chevrons. Clicking on a nav item’s title takes a user to the appropriate page.
The Full Menu is also the mobile menu on smaller screens.

Guidelines

On desktop, the Full Menu appears in the upper left corner of the site on top of a 60% black site overlay.
On mobile, the Full Menu slides in from the side on top of a 60% black site overlay. There is a gap between the edge of the menu and the edge of the site to account for the close button.