Breadcrumbs

Breadcrumb navigation shows users their location within a site hierarchy and provides a path back to parent pages. This guide covers production-ready breadcrumb patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including slash and chevron separators, icon labels, ellipsis truncation, dropdown siblings, pill styles, and accessible markup.

Simple text-based breadcrumbs with a slash separator. The current page is non-interactive and visually distinct from clickable ancestors. This is the most common pattern for documentation sites and blogs.

SVG chevron icons as separators provide a cleaner, more modern look than text characters. Inline SVGs also scale crisply at any size and inherit the surrounding text color.

Adding contextual icons next to breadcrumb labels helps users quickly identify each level. Use small inline SVGs for recognition. This pattern works well in file managers and CMS admin interfaces where each level has a distinct type.

A minimal "back to parent" pattern keeps mobile headers uncluttered. The single ancestor link is paired with the current page title, giving users one-tap access to the previous level without a full hierarchy.

For deep hierarchies, collapse middle items into a clickable ellipsis button. This saves horizontal space while keeping the root and current page visible at all times. Hovering the ellipsis reveals the hidden items in a dropdown, preserving the full path context.

Each breadcrumb level can open a dropdown showing siblings at that depth. Users can jump laterally without going back up the tree — ideal for file managers, CMS interfaces, and deep product catalogs. The chevron-down icon rotates on hover to indicate interactivity.

Compact breadcrumb pills with backgrounds on each segment. Works well in toolbars, dashboards, and narrow sidebar layouts where vertical space is at a premium. The active item uses a green accent background.

Ultra-minimal breadcrumbs with a dot separator and color hierarchy. Links are medium gray, the current page is white and bold. This works well when the breadcrumb lives inside a card or panel.

Breadcrumbs should use a <nav> element with aria-label="Breadcrumb", an ordered list, and aria-current="page" on the last item. This ensures screen readers announce the full path correctly and distinguish the breadcrumb from other navigation landmarks.

Accessible breadcrumbs reduce cognitive load for screen-reader users and keyboard navigators. Keep the markup semantic, the focus order logical, and the current location unambiguous.

• Use a <nav> landmark with aria-label="Breadcrumb" so users can jump to it quickly.
• Mark the current page with aria-current="page" and make it visually distinct (bold or accent color).
• Use an ordered list <ol> so the hierarchy is announced in the correct sequence.
• Ensure every interactive segment is reachable by keyboard and shows a visible focus indicator.
• Keep touch targets at least 44×44px on mobile for each breadcrumb link or button.
• Do not remove the underline or color from links if users rely on those cues to identify actionable text.
• When using dropdowns, expose the toggle with aria-expanded and aria-haspopup in production implementations.

• Use aria-label="Breadcrumb" on the nav element to distinguish it from primary navigation.
• Mark the current page with aria-current="page" and make it visually distinct (bold, different color).
• Keep the root link visible even when collapsing middle items with ellipsis.
• Use semantic <ol> instead of <div> to convey ordering information.
• Ensure touch targets are at least 44×44px on mobile for each breadcrumb link.
• Truncate long labels with ellipsis rather than letting them overflow the container.
• Sync breadcrumb links with the URL structure so deep links work correctly.
• Provide Tailwind and Bootstrap variants from the same semantic base so teams can adopt the pattern without rewriting markup.