Breadcrumbs

We use breadcrumbs to provide navigational information to the user on every tool’s child page in Procore.

Demo and Developer Guidelines

Anatomy

Breadcrumbs

Breadcrumbs are title case.

If a breadcrumb’s label is longer than 30 characters, put an overflow ellipses and a tooltip on hover displaying the full title of the page. This should only be the case when a breadcrumb internationalized.
For detail page breadcrumbs, state the type of page they’re referencing (Create, Edit, View) followed by the item name. Do not state the number of the item or the name as inputted by the user.
Correct
Incorrect

Inactive

Inactive breadcrumbs reference pages the user clicked to get to the page they’re on. The first level always links to the landing page of the tool, and the label is always the name of the tool.

Active

The rightmost / last breadcrumb states the title of the page the user is currently on.   This text is bolded and not hyperlinked.

Behavior

Specifications

Padding

Styling