🍞CSS breadcrumbs

creating a kind of secondary navigation

Breadcrumbs provide a linear navigation that shows

  • where the current page lies

  • relative to the home page

  • ...and the path that led to the current page

They thus provide a hierarchical "trail" of "crumbs" back to the home page, e.g.:

Home > Level 1 > Level 2 > Current

HTML

To implement this, we use an unordered list:

index.html
<body>

...

<ul class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/level-1">Level 1</a></li>
    <li><a href="/level-2">Level 2</a></li>
    ...
    <li>Current</li>
</ul>

...

</body>

CSS

To style this, we make that unordered list, an inline list, then place a separator using the ::before pseudoclass:

style.css

.breadcrumb li {
  display: inline;
}

.breadcrumb li+li::before {
  /* most commonly ">" or "/" to separate the levels */
  content: ">"; 

}
PreviousCSS gridNextJavaScript

Last updated