Horizontal breadcrumb in 10-ish lines of CSS 👍
Tags: html, css, webdev, showdev
Published: 2020-08-19 05:00:49

While browsing around on [MDN] looking at the `<hgroup>` element, I noticed the last line on the note under **usage notes** stating.

> So the HTML5 (W3C) specification provides advice on how to mark up [Subheadings, subtitles, alternative titles and taglines] without using `<hgroup>`.

Reading around on subheadings, I saw **Example 6** - [Breadcrumb navigation].
Whilst breadcrumbs are common I'd never seen this HTML mark-up for one before, in where it utilizes a heading element.

```html
<nav>
  <h2>You are here:</h2>
  <ul id="navlist">
    <li><a href="/">Main</a> →</li>
    <li><a href="/products/">Products</a> →</li>
    <li><a href="/products/dishwashers/">Dishwashers</a> →</li>
    <li><a>Second hand</a></li>
  </ul>
</nav>
```

Directly underneath the code snippet, they've added the following line:

> The breadcrumb code example could be styled as a horizonatal list using CSS:
> ![Image showing horizontal breadcrumb navigation](https://www.w3.org/TR/html52/images/breadcrumb.png)

Thinking about how the CSS for this mark-up would look, I set out to see if I could recreate.

---

## The issues 🤔

The approach for this is pretty straight forward, we have the mark-up done already, the main issues is how font sizes differ between headings and regular text, and how different elements are displayed by default, in this case heading elements are **block-level** elements, as is our `<ul>`.

Our `<li>` are **list-item-level** by default, how that works relative to `block`, `inline` and `flex` I'm not 100% sure, I normally think of them as **block-level** elements.

---

## My solution 🤘

The solution is `display: inline-flex` and `font-size: initial` these are the rockstars doing all the work for us, to be fair `inline-flex` is doing most of the work.

`inline-flex` makes our containers, in this case, our `<h2>` element and `<ul>` element respectively have an **inline-level**, while the content inside them retain the `flexbox` properties, and given the default, `flex-direction` is `row` - the `<li>` lines up horizontally as well.

The `initial` *keyword* gives us the default **value** as defined by our browser, and sure you can be specific and set the `font-size` to whatever you want, but for our purpose, we want the default size.

Adding a bit of CSS magic I learned looking around at Tailwind's [Space Between] so fix some spacing between the `<li>` elements, this is our final CSS.

```css
.breadcrumb > h2, ul {
  display: inline-flex;
  font-size: initial;
  list-style: none;
}

.breadcrumb ul > li + li {
  margin-left: 5px;
}

.breadcrumb ul > li a:not([href]) {
  font-weight: bold;
}
```

---

### Finished results 🔥

Given this CSS by itself doesn't reset any **margins** or **paddings** you get by default, to give the final presentation a smoother result, I did include some more CSS in the final products than is shown in our solution. 🙂

#### Unstyled 👨‍💼

{% codepen https://codepen.io/Thinkverse/pen/jOqMWgw default-tab=result %}

#### Styled 👩‍🎨

{% codepen https://codepen.io/Thinkverse/pen/NWNRxwG default-tab=result %}

---

What do you think? 🤔 - Think we can make this using less CSS? Let me know in the comments below, thanks for reading. 👋

[mdn]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup
[Subheadings, subtitles, alternative titles and taglines]: https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements
[breadcrumb navigation]: https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#bread-crumb-navigation
[space between]: https://tailwindcss.com/docs/space