Breadcrumb - Quick Start Guide

2-Minute Setup

1 Include CSS File

2 Add Breadcrumb HTML



    
        Home
        Category
        Subcategory
        Current Page

✓ Done! Your breadcrumb navigation is ready with automatic separators, hover states, and accessibility built-in.

Quick Reference

Classes

Class	Element	Purpose
`.rsl-breadcrumb`	`<ol>`	Main breadcrumb container
`.compact`	`<ol>`	Smaller size variant (optional)
`.truncate`	`<a>`	Truncate long labels with ellipsis (optional)

ARIA Attributes

Attribute	Where	Purpose
`aria-label="breadcrumb"`	`<nav>`	Identifies navigation as breadcrumb trail
`aria-current="page"`	Last `<li>`	Indicates current page in the trail
`aria-label`	`<a>` (icon-only)	Descriptive label for icon-only links

HTML Structure Patterns

Standard Breadcrumb



    
        Home
        Products
        Electronics
        Laptops

With Icons



    
         Home
         Docs
         Setup

Icon-Only

⚠ Important: When using icon-only breadcrumbs, you MUST add aria-label to each link for screen reader accessibility.

Compact Size



    
        Home
        Category
        Page

Truncated Long Labels



    
        Home
        Very Long Category Name That Would Break Layout
        Page


.rsl-breadcrumb .truncate {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
}

Collapsed Middle Items




    
        Home
        ...
        Parent Category
        Current Page

Configuration Options

Separator Customization

The separator between breadcrumb items is defined in CSS using the ::after pseudo-element. You can customize it:


/* Default separator is "/" */
.rsl-breadcrumb li:not(:last-child):after {
    content: "/";
    margin-left: 5px;
    color: #6c757d;
}

/* Use ">" instead */
.rsl-breadcrumb li:not(:last-child):after {
    content: ">";
}

/* Use icon */
.rsl-breadcrumb li:not(:last-child):after {
    content: "\f054"; /* FontAwesome chevron-right */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

Color Customization


/* Change link colors */
.rsl-breadcrumb a {
    color: #6E7BFF;
}
.rsl-breadcrumb a:hover {
    color: #5a67d8;
}

/* Change separator color */
.rsl-breadcrumb li:not(:last-child):after {
    color: #999;
}

/* Current page color */
.rsl-breadcrumb li[aria-current="page"] {
    color: #495057;
}

Accessibility

Required Semantic Structure

Best Practice: Always use semantic HTML with proper ARIA attributes for screen reader compatibility.

<nav> element: Identifies the breadcrumb as a navigation landmark
aria-label="breadcrumb": Specifies the type of navigation for screen readers
<ol> element: Ordered list represents the hierarchical structure
aria-current="page": Marks the current location in the breadcrumb trail
Current page is not a link: The last item should be plain text, not an <a> element

Keyboard Navigation

Tab: Move between breadcrumb links
Enter/Space: Activate focused link
All links must be keyboard accessible
Focus indicators should be clearly visible

Screen Reader Expectations

Screen readers will announce:

"Breadcrumb navigation" when entering the <nav>
The text of each link in order
"Current page: [page name]" for the final item
For icon-only breadcrumbs, the aria-label content

Contrast Requirements

WCAG AA Compliance:

✅ Link text has 4.5:1 contrast ratio
✅ Separators have sufficient contrast
✅ Current page text is distinguishable
✅ Hover states are clearly visible

Pro Tips

✨ Tip 1: Always start breadcrumbs with "Home" or your site name

✨ Tip 2: Keep breadcrumb labels short (1-2 words ideally)

✨ Tip 3: Use the collapsed pattern (Home / ... / Parent / Current) for hierarchies deeper than 5 levels

✨ Tip 4: Don't include the current page as a link—it should be plain text with aria-current="page"

✨ Tip 5: Place breadcrumbs near the top of the page, typically below the header and above the main content

✨ Tip 6: Breadcrumbs automatically wrap on small screens thanks to flex-wrap: wrap

Troubleshooting

Separators Not Showing

Check: Make sure you're using the .rsl-breadcrumb class on the <ol> element. Separators are added via CSS ::after pseudo-elements.

Last Item Shows Separator

Solution: The CSS uses :not(:last-child) to exclude the last item. Check that your markup doesn't have extra whitespace or elements.

Icons Not Appearing

Check: Ensure Font Awesome or your icon library is properly loaded before using icon breadcrumbs.

Breadcrumbs Overlapping on Mobile

Solution: Use the .compact class for smaller screens, or implement the collapsed pattern for very long trails.