Breadcrumb

Example (a11y tier)

Import

import Breadcrumb from 'abaabil/breadcrumb'         // structure only

import Breadcrumb from 'abaabil/breadcrumb/styled'  // + CSS

import Breadcrumb from 'abaabil/breadcrumb/a11y'    // + nav name, aria-current

Three details that are usually wrong

The separator is drawn, not rendered. A slash or chevron typed between the links ends up in the accessibility tree, and a screen reader reads it: “Home slash Docs slash Buttons”. Here it is a CSS pseudo-element, so it is seen and never heard. It is a chevron built from two logical borders, so it turns around in right-to-left text without an override.

The <nav> is named. A page usually has more than one navigation landmark, and a screen reader user listing them hears “navigation, navigation, navigation” unless each one says what it is.

The last item is not a link. A link to the page you are already on is a link that does nothing, so the final entry renders as text even if you give it an href, and carries aria-current="page" either way. Pass linkCurrent if you need it to stay a link.