Day 15: Breadcrumb 🍞

A breadcrumb is an element that helps users understand the hierarchy of the page and site.

The example component is visible below.

A few notes about this breadcrumb component:

• CSS Variables are used for colors and spacing,
• the all: unset declaration is used to remove default list styles,
• CSS Flexbox is used for layout,
• the gap property is used to add spacing between flex items,
• the :before pseudo-element is used to add delimiters,
• text-decoration-color, text-decoration-style, and text-decoration-thickness properties are used to style the link hover state,
• the :first-letter selector is used to make the emojis bigger.

The code:

<nav class="advent-breadcrumbs">
  <ol>
    <li>
      <a href="#home">🏠 Home</a>
    </li>
    <li>
      <a href="#category">👨‍👩‍👧‍👦 Category</a>
    </li>
    <li>
      <a href="#article" aria-current="location">👦 Article</a>
    </li>
  </ol>
</nav>

.advent-breadcrumbs {
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;
  --space-xmas: 1em;
}

.advent-breadcrumbs ol,
.advent-breadcrumbs li {
  all: unset;
}

.advent-breadcrumbs ol {
  display: flex;
  gap: var(--space-xmas);
}

.advent-breadcrumbs li:not(:first-child):before {
  content: ">";
  color: var(--color-xmas-beta);
  margin-right: var(--space-xmas);
}

.advent-breadcrumbs a {
  display: inline-block;
  color: var(--color-xmas-gamma);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: .1em;
}

.advent-breadcrumbs a:first-letter {
  font-size: 250%;
}

.advent-breadcrumbs a:hover,
.advent-breadcrumbs a:focus,
.advent-breadcrumbs a:active {
  text-decoration-style: double;
  text-decoration-color: var(--color-xmas-beta);
}