---
title: Full Menu
date: 2023-12-17T12:32:00-08:00
author: Josh Magness
canonical_url: "https://designsystem.umd.edu/components/full-menu"
section: Components
---
# Full Menu

Users can access all navigation links on a site with the Full Menu. It slides in from the left when opened. 
Contains main navigation links as well as additional (overflow) links. Functions as the site navigation on mobile devices.
## 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

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

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.

[View Figma design: Navigation - Full Menu](https://www.figma.com/design/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?node-id=11903-17363&t=Ir7p0RVbH2xrEOWG-1)

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