Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Breadcrumbs
Essentials

Breadcrumbs

Breadcrumbs patterns built with StyloftCSS and native HTML.

CSS only1 examplesKeyboard friendly HTML

Breadcrumbs

A labelled breadcrumb navigation with a current destination.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<nav class="sl-breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="/light/">Home</a><span aria-hidden="true">/</span></li>
    <li>
      <a href="/light/components/">Components</a><span aria-hidden="true">/</span>
    </li>
    <li><span aria-current="page">Breadcrumbs</span></li>
  </ol>
</nav>
HTML source · enable JavaScript for the playground9 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.