Breadcrumbs
We use breadcrumbs to provide navigational information to the user on every tool’s child page in Procore.
Demo and Developer GuidelinesAnatomy
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.
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.
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.