Simple Breadcrumb

Breadcrumb with Icons

Long Breadcrumb Trail

With Arrow Separators

<nav aria-label="Breadcrumb">
				<ol class="breadcrumb">
				<li><a href="/">Home</a></li>
				<li aria-hidden="true">/</li>
				<li><a href="/products">Products</a></li>
				<li aria-hidden="true">/</li>
				<li><span aria-current="page">Electronics</span></li>
				</ol>
				</nav>

<li>
				<a href="/docs">
				<span class="axicon render" data-name="Book"></span>
				Documentation
				</a>
				</li>

				<li aria-hidden="true">
				<span class="axicon render" data-name="ChevronRight"></span>
				</li>

• <nav aria-label="Breadcrumb"> - Semantic navigation region
• <ol> - Ordered list shows hierarchy properly
• aria-current="page" - Marks the current page in the breadcrumb
• class="breadcrumb" - Applies breadcrumb styling (single class)
• aria-hidden="true" - Hide separators from screen readers

• Slash (/) - Most common, plain text
• Chevron (›) - Modern, often paired with icons
• Dot (•) - Compact separator
• Arrow (→) - Directional, shows forward progression
• Pipe (|) - Traditional, formal appearance

• E-commerce: Show product category hierarchy (Home / Electronics / Phones / iPhone)
• Documentation: Display doc navigation path (Docs / Getting Started / Installation)
• Blog: Show category structure (Home / Blog / Tutorials / CSS)
• File Systems: Display folder/file paths
• Multi-step Processes: Show current step in a wizard

• Always use <nav aria-label="Breadcrumb"> for semantic markup
• Use <ol> (ordered list) to convey hierarchy
• Mark the current page with aria-current="page"
• Ensure links are keyboard accessible
• Keep breadcrumb text short and descriptive
• Don't use breadcrumbs as the only navigation method

This component automatically adapts to different screen sizes:

Mobile (< 768px)

On mobile devices:

• Optimized for small screens
• Touch-friendly spacing maintained (44px minimum)
• Text wraps naturally without overflow
• Content density optimized for readability

Desktop (1024px+)

On desktop displays:

• Enhanced visual features
• Hover states and transitions
• Full keyboard navigation support
• Optimal spacing and sizing

Framework Integration

Responsive behavior is automatic:

• Framework handles media queries
• No custom CSS required
• Mobile-first approach applied
• Accessibility maintained at all sizes

• Always Include Home: First breadcrumb should link to home page
• Current Page Not a Link: Don't make the current page a clickable link
• Truncate Long Paths: Use ellipsis or hide early breadcrumbs on mobile
• Consistent Separators: Use the same separator throughout
• Semantic Structure: Match breadcrumb hierarchy to actual site structure
• Mobile Responsive: Consider hiding breadcrumbs or truncating on small screens

• Semantic Structure - Built with native HTML5 elements for maximum reliability.
• Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
• Fully Responsive - Scales perfectly from mobile to desktop screens.
• No JS Dependency - Core functionality relies on pure CSS for maximum performance.
• Customizable - Easily extendable via Axiom01's design tokens and modifiers.