CSS Challenges Results #1 | Breadcrumbs
Tags: css, easy, ui, challengeresults
Published: 2019-10-13 17:22:14

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

{% link https://dev.to/mikister2012/css-challenges-1-breadcrumbs-1dn8 %}

## 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:

```html
<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](https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html#sc1_label) 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:

```html
<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.

{% codepen https://codepen.io/mikister/pen/mddyxEr default-tab=results %}

#### 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:

{% codepen https://codepen.io/mikister/pen/GRRoMbe default-tab=results %}

#### Clip path

Another interesting option used by [IngmarsLazdinsGit](https://dev.to/ingmarslazdinsgit) and [Kyle Oliveiro](https://dev.to/kyleoliveiro) is to apply a `clip-path` property to `::before` and `::after` pseudo-elements. Here's the code:

```css
.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](https://dev.to/davide) chose the simpler design, that's easy to setup and can be incorporated almost anywhere.

{% codepen https://codepen.io/Scario/pen/gOObjdG default-tab=results %}

The `>` is added using `::after` pseudo-element.


### Skewed

[Gareth Gillman](https://dev.to/gareth_gillman) decided to use a slashed design.

{% codepen https://codepen.io/garethTF/pen/MWWYZLy default-tab=results %}

He did this by applying `transform: skewX(-15deg);` to individual breadcrumbs.


### Rounded Squares

[Augusto Queiroz](https://dev.to/augustoqueiroz) went for rounded squares separated with a colon.

{% codepen https://codepen.io/augustoqueiroz/pen/zYYxyrv default-tab=results %}


## Next challenge

{% link https://dev.to/mikister2012/css-challenges-2-tooltips-3f5d %}

----

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