Breadcrumbs

Availability

Component will be on all pages by default unless noted otherwise. Component will not be on Source pages.

Placement on Page

The breadcrumb will display under the page title, which is part of the Standard Hero. When an image is included in the page title, the breadcrumb will display between title and image, as shown above.

Home Icon

The home icon will be present in the breadcrumb on all pages except for home page.

Function

Breadcrumbs will indicate where a page lives in the content tree. A dropdown menu will allow user to view the child pages of the parent page and the child pages of the current page. For example, the child pages of "Communities" will display in a dropdown (see above); when a user hovers over it; clicking will take a user to that page. Similarly, any child pages of "Institutes & Technical Groups" will appear in the same way.

Showing Pages

Admins will be able to specify the title of the page that appears in the breadcrumb. This is useful for pages with longer titles (e.g. "Structural Engineering Institute" could display as "SEI"). Admins will also be able to determine if the pages show in the breadcrumb at all. This is useful if a page has a high number of child pages.

Mobile Gradient

When viewed on mobile, if the breadcrumb component reaches a max width, a gradient will be applied to the left side. it will gradually fade until it is no longer visible. An arrow will display that can take a user back a section.