UIBreadcrumb
Shows where the page sits in the site and gives a way back up, one level at a time.
A breadcrumb is the path from the home page to the current one. It answers “where am I?” and lets the user go up without the back button.
When to use it
Use it
- Every level is a link except the last, which is the current page.
- Keep names short; if the path is long, shorten the middle levels.
- Put it above the title of the page, where people look first.
Don't
- Use it as the only navigation of the site.
- Repeat the current page as a link.
- Show it on the home page.
Anatomy
A nav with an ordered list (breadcrumb) of items (breadcrumb-item) separated by a divider that the style draws; the last item is active and carries aria-current="page".
Variants and states
This Moodle version has no dark mode: examples stay light.
Moodle 5.3’s own breadcrumb
Moodle 5.3 draws its breadcrumb with its own component (mds-breadcrumb), which shortens a long path with a menu. Where a page shows the breadcrumb of Moodle, it is this one.
This Moodle version has no dark mode: examples stay light.
States
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Breadcrumb × length | Up to four levels shown in full; beyond that, shorten the middle ones (Moodle 5.3 does it with a menu). |
| Breadcrumb + icon | An icon only on the first level (Home), never on every level. |
| Breadcrumb × title | Above the title of the page, which repeats the last level. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| The links are quiet and take a tint on hover | The path is orientation, not the page; it must not compete with the title. |
| The current page is dark and semi-bold | It is the one thing that is not a link, and the difference is visible without colour. |
| A link that was clicked looks like a link at rest | Only the keyboard gets the ring, so a click never leaves a box stuck around a level. |
Classes
| Class | What it does |
|---|---|
breadcrumb |
The ordered list |
breadcrumb-item |
One level |
active |
The current page (not a link) |
In this version
Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet.
Accessibility
- The wrapper is a
navwitharia-label="breadcrumb". - The current page has
aria-current="page". - The divider is drawn by CSS, so a screen reader does not read it.