Breadcrumbs
Search the component library

Breadcrumbs

v1.0.1
Download UI Kit v1.9.0

Use breadcrumbs to help users keep track of their locations within a website.

Download UI Kit v1.9.0

Usage Guidelines

This component is a visual style guide only.

Usage

Breadcrumbs are used primarily to give users a secondary means of navigating a website. They provide a trail of links for the user to follow back to the starting or entry point. Typically, breadcrumbs display a hierarchy of the current page in relation to the website’s structure.

Note: Images used on this page are scaled up to make them easier read, go to the redlines section below for specification.

Breadcrumbs trail example.

Rendering

A breadcrumbs trail is typically rendered as a trail of links. At the end of the trail, the page currently being viewed is displayed as a bold non-link font.

A greater-than sign (>) serves as hierarchy separator, as in the format of Parent page > Child page.

Breadcrumbs trail ended with page title.

If page has a title, do not include the title in the breadcrumbs to avoid redundancy.

Breadcrumbs trail with parent level links.

Mobile or Single Level Directory

Provide a link back to previous page.

Breadcrumbs trail for mobile or single level directory.

Placement

Breadcrumbs are placed horizontally across the top of a web page, often below navigation or application header.

Examples of breadcrumbs trail placements for desktop and mobile screens. Note on mobile, the breadcrumb is a link back to previous level.

Redlines

Separator Icon
Back Icon
Links Typography
Page Title Typography

Changelog

1.0.1

  • ADDED: underlined link style on hover

1.0.0

Van Yang

  • INITIAL VERSION