---
title: Nav item
date: 2023-12-17T12:32:00-08:00
author: Josh Magness
canonical_url: "https://designsystem.umd.edu/components/nav-item"
section: Components
---
# 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.
Basic navigation element for use in a site’s main navigation
## 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

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

### Requirements for use

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

[View Figma design: Navigation - nav item](https://www.figma.com/design/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?node-id=11694-1930&t=Ir7p0RVbH2xrEOWG-1)

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