Nav item

A Nav Item is the basic element used in a site’s main navigation. It usually links to a landing page. Each Nav Item typically corresponds to a section of a site, and it may have child pages that appear in the dropdown menu.

Dos

Use simple and direct labels for navigation items. Describe what a user will find in the section or on the page

Don'ts

Don’t use labels with more than 3 short words

Variations

Accessibility

Keyboard Accessible

Users are able to use the keyboard to navigate through any menu item using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ to activate and are also able to trigger the menu item dropdown from a keyboard. 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

Content

Character limit ranges

Nav item text

8 characters (16 max)

Layout

Guidelines

The down chevron indicates there are child pages and should not be included if the nav item has no children.
Dropdowns may be 1-2 columns. Minimum of 8 links before a 2 column option is available.
Dropdown centers under its main nav item until the right of the outer lock. Outer lock is outer edge of where nav dropdown should hit.