Skip to main content
UMDDesign System

Navigation

Side Nav

The side navigation helps users navigate easily on websites that have multiple sections with numerous pages.

Side navigation graphic

Variations

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

On mobile layouts, the side navigation is replaced by the contextual mobile navigation.

Guidelines

  • The right chevron next to a nav item indicates there are child pages and should not be included if the nav item has no children.