CSS Challenges Results #1 | Breadcrumbs

There were some interesting submissions to last weeks challenge. Here's a link to the challenge post:

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 our nav element, this specifies what kind of navigation this is
• aria-current="page" added to last link (on the a 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

That's it for last week. Have fun with this week's challenge.