Breadcrumbs - Design
Breadcrumbs are used to show the user where they are and where they came from on.
Live Demo
Usage
Breadcrumbs should be used when a page is a subpage of another. An example would be if you were in Graphics Tees, and then clicked on Top Sellers. Breadcrumbs is a trail that shows where you navigated to and from. It also allows the user to easily navigate back to the last page they were on.
Anatomy
2. Sub-directory
3. Current Path
4. Path Divider
Behavior
The breadcrumbs component stretches horizontally to fit its container, and the urls have a default justification of left. The color of the base url is lighter than the current url, and there is some padding between the divider and the urls.
Breadcrumbs - Implementation
Breadcrumbs are used to show the user where they are and where they came from on.
Basic Breadcrumbs
<nav aria-label="Breadcrumbs" class="breadcrumbs">
<ol class="breadcrumbs__list">
<li class="breadcrumbs__crumb">
<a class="breadcrumbs__link" href="/">
Base Url
</a>
</li>
<li class="breadcrumbs__crumb">
<span class="breadcrumbs__link" aria-current="page">
Current Url
</span>
</li>
</ol>
</nav>.breadcrumbs {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
font-weight: 400;
line-height: 1.4rem;
font-size: 16px;
direction:ltr;
background-color: #fff;
unicode-bidi: embed;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
font-synthesis: none;
font-feature-settings: 'liga','kern'
}
.breadcrumbs__list {
list-style: none;
display: flex;
flex-flow: row wrap;
margin: 0;
padding: 0
}
.breadcrumbs__crumb {
display: flex;
font-size: .875rem;
color: #212121
}
.breadcrumbs__crumb:not(:last-child):after {
content:'/';
margin: 0 8px
}
.breadcrumbs__link {
text-decoration: none;
-webkit-tap-highlight-color: transparent;
outline: 0
}
.breadcrumbs__link,
.breadcrumbs__link:visited {
color: #6f6f6f
}
a.breadcrumbs__link:hover {
color: #285bc7;
text-decoration: underline
}
[aria-current=page].breadcrumbs__link,
[aria-current=page].breadcrumbs__link:visited{
color: #212121;
cursor: default
}