Breadcrumb
Title
Actions
Status
Meta data
Responsive Breakpoints
X-large:
Large:
Medium:
Small:
Text Truncation
A page title or breadcrumbs with long labels will use end truncation.
Breadcrumb Overflow
When there are more than 3 breadcrumbs, all breadcrumbs will collapse into an overflow menu.
1. Breadcrumbs and Page Title
The breadcrumb bar with the page title should always be displayed in the the title bar. If there are not breadcrumbs, then just the page title will be shown.
2. Meta Data
Meta data should display short, concise pieces of data. It shouldn't display long pieces of data and it shouldn't display an excessive amount of data.
3. Page Actions
Page actions should be used to trigger page -wide functionality. Page actions shouldn't be used to trigger functionality that is specific to a section within the page.
4. Page Actions States
If a page action opens an additional view within the page, then the button should remain in a pressed state.
Related Components
Additional Reading
Breadcrumbs: 11 Design Guidelines for Desktop and Mobile https://www.nngroup.com/articles/breadcrumbs/
Breadcrumbs For Web Sites: What, When and How https://uxplanet.org/breadcrumbs-for-web-sites-what-when-and-how-9273dacf1960