Breadcrumbs

The path from the front page to where the user is now. The class goes on an <ol> inside a <nav>: the order matters, so the list has to be numbered even though the numbers are not shown.

How to use it

Example

Plain HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/src/components/css/breadcrumbs/breadcrumbs.css">
<!-- Or everything in one file: https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/dist/lotek.css -->

<nav aria-label="You are here">
<ol class="lt-breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">My cases</a></li>
  <li><a href="#" aria-current="page">Application 2026-0481</a></li>
</ol>
</nav>

TypeScript

import "@lo-tek/interfaces/tokens.css"
import "@lo-tek/interfaces/breadcrumbs.css"

lt is used in two ways, and which one depends on whether you create the element or find it.

If you create the markup, spread the attributes in. That is the way in React, Astro and anything else that renders:

import { lt } from "@lo-tek/interfaces/react"

<nav aria-label="You are here">
  <ol {...lt.breadcrumbs()}>
    <li><a href="/">Home</a></li>
    <li aria-current="page">Housing benefit</li>
  </ol>
</nav>

The import is from /react here, since the block is JSX. From there the keys are className and htmlFor. In Astro and anything else without React, import @lo-tek/interfaces and you get class and for.

If the element is already there, set them on it. That is the way when you enhance HTML a server or a template has sent:

import { lt } from "@lo-tek/interfaces"

const trail = document.querySelector<HTMLOListElement>("#breadcrumbs")

lt.setAttributes(trail, lt.breadcrumbs())

Three things have to be in the markup:

What	Why
<nav aria-label="You are here">	Screen readers list the navigation regions on the page. Without the text this one is just called “navigation”.
<ol>, not <ul>	The order is part of the meaning
aria-current="page" on the last step	Says which page the user is on. Colour alone says nothing.

The separator is added with CSS. If the slash were in the markup, screen readers would read “slash” between every step.

Classes you can style

Class	What it is
.lt-breadcrumbs	The list of steps

Variable	Default
--lt-breadcrumbs-gap	var(--lt-spacing-2)

The separator comes from ::before on every step after the first, and can be replaced. Keep the empty alternative text after the character: generated content is read out, and without it the screen reader says the new character between every step, just as it used to say “slash”. The first rule is the fallback for browsers that do not know the syntax and would otherwise discard the whole declaration, as in the stylesheet itself:

.lt-breadcrumbs li + li::before {
  content: "›";
}

@supports (content: "/" / "") {
  .lt-breadcrumbs li + li::before {
    content: "›" / "";
  }
}

See Customising for how the variables and the layer work.

Accessibility

• The last step should be where the user is now, not somewhere to go. Either as a link with aria-current="page", or as plain text.
• Do not shorten the steps to ”…” on a small screen unless they can be expanded. The user then loses exactly the overview the trail is for.
• The trail does not replace a back button. It shows where in the structure the user is, not where they came from.