"A breadcrumb navigation provides links back to each previous page the user navigated through, and shows the user's current location in a website." - w3Schools
Mikes Notes
My job today was sorting out the default breadcrumb component for the Ajabbi Design System. Users with an account will be able to override this CSS.
I like something as simple as the one below.
Home > Pictures > Summer 15
Here are examples of code from
- w3schools
- MDN
- WAI-ARIA patterns
- Ajabbi Design System.
From w3Schools
Example
Home > Pictures > Summer 15
Code
<ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Pictures</a></li> <li><a href="#">Summer 15</a></li> <li>Italy</li> </ul>
CSS
/* Style the list */ ul.breadcrumb { padding: 10px 16px; list-style: none; background-color: #eee; } /* Display list items side by side */ ul.breadcrumb li { display: inline; font-size: 18px; } /* Add a slash symbol (/) before/behind each list item */ ul.breadcrumb li+li:before { padding: 8px; color: black; content: "/\00a0"; } /* Add a color to all links inside the list */ ul.breadcrumb li a { color: #0275d8; text-decoration: none; } /* Add a color on mouse-over */ ul.breadcrumb li a:hover { color: #01447e; text-decoration: underline; }
From WAI-ARIA Patterns
Example
WAI-ARIA Authoring Practices Guide (APG) > Patterns > Breadcrumb Pattern > Breadcrumb Example
Code
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="../../../../">
WAI-ARIA Authoring Practices Guide (APG)
</a>
</li>
<li>
<a href="../../../">
Patterns
</a>
</li>
<li>
<a href="../../">
Breadcrumb Pattern
</a>
</li>
<li>
<a href="#" aria-current="page">
Breadcrumb Example
</a>
</li>
</ol>
</nav>
<nav aria-label="Breadcrumb" class="breadcrumb"> <ol> <li> <a href="../../../../"> WAI-ARIA Authoring Practices Guide (APG) </a> </li> <li> <a href="../../../"> Patterns </a> </li> <li> <a href="../../"> Breadcrumb Pattern </a> </li> <li> <a href="#" aria-current="page"> Breadcrumb Example </a> </li> </ol> </nav>
CSS
nav.breadcrumb {
padding: 0.8em 1em;
border: 1px solid hsl(0deg 0% 90%);
border-radius: 4px;
background: hsl(300deg 14% 97%);
}
nav.breadcrumb ol {
margin: 0;
padding-left: 0;
list-style: none;
}
nav.breadcrumb li {
display: inline;
}
nav.breadcrumb li + li::before {
display: inline-block;
margin: 0 0.25em;
transform: rotate(15deg);
border-right: 0.1em solid currentcolor;
height: 0.8em;
content: "";
}
nav.breadcrumb [aria-current="page"] {
color: #000;
font-weight: 700;
text-decoration: none;
}
nav.breadcrumb {
padding: 0.8em 1em;
border: 1px solid hsl(0deg 0% 90%);
border-radius: 4px;
background: hsl(300deg 14% 97%);
}
nav.breadcrumb ol {
margin: 0;
padding-left: 0;
list-style: none;
}
nav.breadcrumb li {
display: inline;
}
nav.breadcrumb li + li::before {
display: inline-block;
margin: 0 0.25em;
transform: rotate(15deg);
border-right: 0.1em solid currentcolor;
height: 0.8em;
content: "";
}
nav.breadcrumb [aria-current="page"] {
color: #000;
font-weight: 700;
text-decoration: none;
}
From MDN
Example
Home > Category > Sub Category > Type > Product
Code
<nav aria-label="Breadcrumb" class="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Sub Category</a></li>
<li><a href="#">Type</a></li>
<li><span aria-current="page">Product</span></li>
</ul>
</nav>
<nav aria-label="Breadcrumb" class="breadcrumb"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Category</a></li> <li><a href="#">Sub Category</a></li> <li><a href="#">Type</a></li> <li><span aria-current="page">Product</span></li> </ul> </nav>
CSS
.breadcrumb {
padding: 0 .5rem;
}
.breadcrumb ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumb li:not(:last-child)::after {
display: inline-block;
margin: 0 .25rem;
content: "→";
}
.breadcrumb { padding: 0 .5rem; } .breadcrumb ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .breadcrumb li:not(:last-child)::after { display: inline-block; margin: 0 .25rem; content: "→"; }
From Ajabbi Design System
Example
Home > Design System > Components > Breadcrumb
Code
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li><a href="../../index.html">Home</a></li>
<li><a href="../index.html">Design System</a></li>
<li><a href="index.html">Components</a></li>
<li><a href="#" aria-current="page">Breadcrumb</a></li>
</ol>
</nav>
<nav aria-label="Breadcrumb" class="breadcrumb"> <ol> <li><a href="../../index.html">Home</a></li> <li><a href="../index.html">Design System</a></li> <li><a href="index.html">Components</a></li> <li><a href="#" aria-current="page">Breadcrumb</a></li> </ol> </nav>
CSS
nav.breadcrumb {
padding: 0.8em 1em;
border: 1px solid hsl(0deg 0% 90%);
background: hsl(300deg 14% 97%);
}
nav.breadcrumb ol {
margin: 0;
padding-left: 0;
list-style: none;
}
nav.breadcrumb li {
display: inline;
}
nav.breadcrumb li + li::before {
display: inline-block;
margin: 0 0.25em;
height: 0.8em;
content: ">";
}
nav.breadcrumb [aria-current="page"] {
color: #000;
font-weight: 700;
text-decoration: none;
}
nav.breadcrumb { padding: 0.8em 1em; border: 1px solid hsl(0deg 0% 90%); background: hsl(300deg 14% 97%); } nav.breadcrumb ol { margin: 0; padding-left: 0; list-style: none; } nav.breadcrumb li { display: inline; } nav.breadcrumb li + li::before { display: inline-block; margin: 0 0.25em; height: 0.8em; content: ">"; } nav.breadcrumb [aria-current="page"] { color: #000; font-weight: 700; text-decoration: none; }
Resources
- https://www.learnui.design/blog/the-3-laws-of-locality.html
- https://www.smashingmagazine.com/2022/04/breadcrumbs-ux-design/
- https://www.w3schools.com/howto/howto_css_breadcrumbs.asp
- https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation
- https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
No comments:
Post a Comment