Breadcrumbs
Breadcrumbs are used to support way-finding and make users aware of their current location within the hierarchical structure of uhc.com. They are represented as a trail of links at the top of the page, just below the global navigation. Breadcrumbs should start with the root “Home” and subsequent links are deeper levels stemming from the root.
When to use
- Helping users understand where they are within the site hierarchy
When not to use
- Displaying on a top-level page such as the homepage
- As primary way to navigate the site
Anatomy
- Page link: directs users to the parent-level page(s)
- Separator: clearly distinguishes between each page
- Current page title: displays the page title the user is currently on
Demos & variations
Desktop
When used in desktop breadcrumbs should display all page levels with no truncation and wrap to the next line if needed.
Tablet and mobile
When used in tablet and mobile, breadcrumbs should only display the next immediate parent page.
Placement
Breadcrumbs should sit at the top of the page just below the global header.
Behaviors
All the pages in the breadcrumb component should link to their respective pages, except the current page.
Mouse
Users can click on a page link, the separators between page links are not interactive.
Keyboard
Users can navigate between page links by pressing Tab and Shift-Tab. Users can trigger a page link by pressing Enter when the page link has focus.