I am available for hire!

Advent

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);
}

Advent of UI components 🎄

Check other UI components.

Day 24: Details 🎹

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 24: Details.

Day 23: Radio button 📱

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 23: Radio button.

Day 22: Checkbox 🧦

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 22: Checkbox.

Day 21: Notification 🤫

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 21: Notification.

Day 20: Code block 💻

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 20: Code block.

Day 19: Pagination 📖

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 19: Pagination.

Day 18: Social share 🔗

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 18: Social share.

Day 17: Card 🎴

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 17: Card.

Day 16: Table 🎶

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 16: Table.

Day 14: Blockquote 💬

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 14: Blockquote.

Day 13: List 🗒️

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 13: List.

Day 12: Figure 🖼️

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 12: Figure.

Day 11: Video embed 📺

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 11: Video embed.

Day 10: Footer 👇

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 10: Footer.

Day 9: Header ☝️

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 9: Header.

Day 8: Hero 🦸‍♂️

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 8: Hero.

Day 7: Intro 💬

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 7: Intro.

Day 6: Horizontal rule 〰️

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 6: Horizontal rule.

Day 5: Split 💔

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 5: Split.

Day 4: Banner 🚩

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 4: Banner.

Day 3: Gallery 🍿

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 3: Gallery.

Day 2: Tag 🎁

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 2: Tag.

Day 1: Button 🎅

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 1: Button.

Latest Last.fm tracks:

♬ See the full Last.fm profile