There were some interesting submissions to last weeks challenge. Here's a link to the challenge post:
Article No Longer Available
First thing first
Why have a different series for solutions?
Two reasons mainly:
- to better organise these posts,
- and allow anyone looking through them latter to have a better overview of all topics covered (less clutter, since there's only one post per topic in the series, instead of two)
The HTML
Next thing let's see how the html should look like, since we can't write css without knowing how our html is structured.
This is what the structure should be like:
<nav>
<ol>
<li> <a></a> </li>
<li> <a></a> </li>
<li> <a></a> </li>
</ol>
</nav>
Let's go quickly through each one:
-
nav
is used because this is a feature used to navigate the site -
ol
is used because the order of the items is important -
li
is just list item -
a
is the link element- side note: some people have suggested using span for the last item and while they provided good arguments for doing so, I have decided to follow the example given on W3C site
Alongside this, our html is obviously going to include some class
attributes and href
ones for links, two other attributes that we are going to include are:
-
aria-label="Breadcrumb"
added to ournav
element, this specifies what kind of navigation this is -
aria-current="page"
added to last link (on thea
element), specifies that this is the link to the current page
This is what it's gonna look all combined together:
<nav aria-label="Breadcrumbs">
<ol class="breadcrumbs">
<li class="crumb"><a href="#">Home</a></li>
<li class="crumb"><a href="#">UI</a></li>
<li class="crumb"><a href="#">Navigation</a></li>
<li class="crumb"><a href="#" aria-current="page">Breadcrumbs</a></li>
</ol>
</nav>
Submisions
With that out of the way, let's look at different ideas everyone had for implementing breadcrumbs.
Arrows
Here's the design me and most others chose.
Borders
Amongst all submissions using borders to create the triangles was the most popular.
This works because different borders (top, right, bottom, and left) can be assigned different colors (including transparent
) and they meet at a 45 degree angle. Here's a codepen to better visualise this:
Clip path
Another interesting option used by IngmarsLazdinsGit and Kyle Oliveiro is to apply a clip-path
property to ::before
and ::after
pseudo-elements. Here's the code:
.crumb::before {
clip-path: polygon(100% 0, 100% 100%, 0% 100%, 50% 50%, 0% 0%);
}
.crumb::after {
clip-path: polygon(50% 50%, -50% -50%, 0 100%);
}
Minimalist
Davide Scarioni chose the simpler design, that's easy to setup and can be incorporated almost anywhere.
The >
is added using ::after
pseudo-element.
Skewed
Gareth Gillman decided to use a slashed design.
He did this by applying transform: skewX(-15deg);
to individual breadcrumbs.
Rounded Squares
Augusto Queiroz went for rounded squares separated with a colon.
Next challenge
Article No Longer Available
That's it for last week. Have fun with this week's challenge.
Top comments (0)