Building a breadcrumbs component
A foundational overview of how to build a responsive and accessible breadcrumbs component for users to navigate your site.
• Updated
In this post I want to share thinking on a way to build breadcrumb components. Try the demo.
If you prefer video, here’s a YouTube version of this post:
Overview #
A breadcrumbs component shows where in the site hierarchy the user is. The name is from Hansel and Gretel, who dropped breadcrumbs behind them in some dark woods and were able to find their way home by tracing crumbs backwards.
The breadcrumbs in this post are not standard breadcrumbs, they’re breadcrumb-like. They offer additional functionality by putting sibling pages right into the navigation with a , making multi-tiered access possible.
Background UX #
In the component demo video above, the placeholder categories are genres of video games. This trail is created by navigating the following path: home » rpg » indie » on sale
, as shown below.
This breadcrumb component should enable users to move through this information hierarchy; jumping branches and selecting pages with speed and accuracy.
Information architecture #
I find it’s helpful to think in terms of collections and items.
Collections #
A collection is an array of options to choose from. From the homepage of the breadcrumb prototype of this post, the collections are FPS, RPG, brawler, dungeon crawler, sports and puzzle.
Items #
A video game is an item, a specific collection could also be an item if it represents another collection. For example, RPG is an item and a valid collection. When it’s an item, the user is on that collection page. For example, they are on the RPG page, which displays a list of RPG games, including the additional subcategories AAA, Indie and Self Published.
In computer science terms, this breadcrumbs component represents a multidimensional array:
const rawBreadcrumbData = {
"FPS": {...},
"RPG": {
"AAA": {...},
"indie": {
"new": {...},
"on sale": {...},
"under 5": {...},
},
"self published": {...},
},
"brawler": {...},
"dungeon crawler": {...},
"sports": {...},
"puzzle": {...},
}
Your app or website will have custom information architecture (IA) creating a different multidimensional array, but I hope the concept of collection landing pages and hierarchy traversal can make it into your breadcrumbs as well.
Layouts #
Markup #
Good components begin with appropriate HTML. In this next section I’ll cover my markup choices and how they impact the overall component.
Dark and light scheme #
meta name="color-scheme" content="dark light">
The color-scheme
meta tag in the above snippet informs the browser that this page wants the light and dark browser styles. The example breadcrumbs don’t include any CSS for these color schemes, and so the breadcrumbs will use the default colors provided by the browser.
Try removing all the styles from the demo page. The component works without them due to the well structured markup.
Navigation element #
nav class="breadcrumbs" role="navigation">nav>