---
title: Side Nav
date: 2024-01-08T10:49:00-08:00
author: Jiayu Kang
canonical_url: "https://designsystem.umd.edu/components/side-nav"
section: Components
---
# Side Nav

The side navigation helps users navigate easily on websites that have multiple sections with numerous pages.
Helps users navigate sections on a site’s interior pages
## Dos
- Use simple and direct labels for navigation items. Describe what a user will find in the section or on the page.
## Variations

[View component playground: Side Nav](https://playground.designsystem.umd.edu/?path=/story/components-navigation-side-nav--one-tier)

## Accessibility

### Built in 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 

### Requirements for use

**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.

[View Figma design: navigation / side nav](https://www.figma.com/design/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?node-id=19511-14351&t=Ir7p0RVbH2xrEOWG-1)

## 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.