Horizontal breadcrumb in 10-ish lines of CSS 👍

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.

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

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.

.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 👨‍💼

Styled 👩‍🎨

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