< Back to Style Guide

Breadcrumbs

Orange arrow: breadcrumb-link-orange
Navy arrow: breadcrumb-link-navy
Blue arrow: breadcrumb-link-blue
Yellow arrow: breadcrumb-link-yellow
White arrow: breadcrumb-link-white

“Breadcrumbs” typically refers to the navigational aid on a website or within software applications. They are a series of links usually displayed horizontally at the top of a page or application, indicating the path a user has taken to arrive at the current page or location. The use of breadcrumbs in website design helps users understand their current location within a website or application hierarchy and allow them to easily navigate back to previous pages or sections.

Breadcrumb Usage

To implement breadcrumbs, utilize Module Templates by clicking on the “+” for a new module and going to “Add from Library.”

Select the desired breadcrumbs from the listing of various pre-designed modules.
Revise the links and text to create a path back to the College of Education homepage.

Breadcrumb Class

Breadcrumbs are implemented by creating anchor links with the class of “breadcrumb-link-COLOR” and selecting the link color for the anchor text within the Divi builder. The classes for each of the breadcrumb arrow colors may be found below.