---
title: Breadcrumbs
date: 2023-12-17T12:12:00-08:00
author: Josh Magness
canonical_url: "https://designsystem.umd.edu/components/breadcrumbs"
section: Components
---
# Breadcrumbs

A standard navigation element that helps users orient themselves and move through the different levels of a website.
A navigational tool typically used on deeper interior pages
## Dos
- Show the current position within the website's hierarchical structure (rather than the user's session history)
## Don'ts
- Don’t use for shallow websites with 2 or fewer levels
- Don’t use as a substitute for the main navigation bar
## Variations

[View component playground: Breadcrumbs](https://playground.designsystem.umd.edu/?path=/story/components-navigation-breadcrumbs--light)

## Accessibility

### Built in accessibility

**Keyboard Accessible**
Users can navigate through focusable content, each item in the breadcrumbs component is a link. Using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ key to activate. WCAG 2.1.1: Keyboard This navigation is done in sequential and logical order. WCAG 2.4.3: Focus Order

**Enhanced Tap Targets**
The breadcrumb component has adequate white space around the entire breadcrumb structure and in between each breadcrumb to ensure clear tap targets and prevent users from missing or accidentally clicking other breadcrumbs. WCAG 2.5.5: Tap Targets

**Swipe Behavior**
If breadcrumbs wrap to multiple lines, the component is designed for the user to be able to use swipe behavior for navigation to help navigate more easily through multi-line breadcrumbs by providing a larger and more manageable interactive area. WCAG 2.5.5: Target Size

**Hover and Focus State**
The breadcrumb links have distinctive styling for both hover and focus states, providing visual cues that the element is interactive. 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)

### Requirements for use

**Titles**
Consider using short titles for each breadcrumb WCAG 2.4.6: Headings and Labels

## Layout

[View Figma design: Breadcrumb](https://www.figma.com/file/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?type=design&node-id=5077-1350&mode=design)

## Guidelines

Include the current page as the last item in the breadcrumb trail except for articles or events.The final breadcrumb, when representing the current page, should not be a link.Consider using a short title for the breadcrumb title, if this is an option in your CMS.