Breadcrumb Examples

RSL Breadcrumb

Display navigation trails showing the user's current location within the site hierarchy

New to RSL Breadcrumbs?

Get up and running in 2 minutes with our Quick Start Guide!

Breadcrumb Classes
.rsl-breadcrumb — Main container (ol element)
.compact — Smaller size variant (optional)
.truncate — Truncate long labels with ellipsis (optional)

ARIA Attributes
aria-label="breadcrumb" — Identifies nav as breadcrumb navigation
aria-current="page" — Indicates current page (on last li)

Files Needed
• styles/breadcrumb.css - Breadcrumb styling

Accessibility Features
• Semantic <nav> and <ol> structure
• Screen reader support with ARIA labels
• Keyboard navigable links
• Clear visual hierarchy
• Sufficient color contrast

Download RSL Example Pack

Page Header Context

Breadcrumbs commonly appear in page headers to show location context.

Multi-Level Section Navigation

Show deep navigation hierarchies for documentation or knowledge bases.

Node.js Setup Instructions

Before installing our framework, you'll need to have Node.js installed on your system. Follow these steps to get started...

Dashboard Context

Breadcrumbs help users navigate complex dashboards and admin interfaces.

User Settings

Manage account preferences and privacy settings

E-commerce Product Navigation

Help shoppers understand product categories and navigate back up the hierarchy.

Blog Article Context

Show category and topic hierarchy for blog posts and articles.

Building Responsive Layouts with Modern CSS

Posted on January 15, 2025 • 8 min read

Learn how to create flexible, mobile-friendly layouts using CSS Grid and Flexbox...

Responsive Behavior

Breadcrumbs naturally wrap on smaller screens thanks to flexbox layout.

Desktop View

On larger screens, breadcrumbs display in a single line:

Mobile View

On smaller screens, breadcrumbs automatically wrap to multiple lines. Try resizing your browser!

Tip: For very long breadcrumb trails on mobile, consider using the collapsed pattern (Home / ... / Parent / Current) to save space.

Accessibility & Best Practices

Semantic HTML

Use <nav> element with aria-label="breadcrumb"
Use <ol> (ordered list) to represent hierarchy
Add aria-current="page" to the last item (current page)
Current page should be plain text, not a link

ARIA Attributes

aria-label="breadcrumb" - Identifies the navigation type for screen readers
aria-current="page" - Marks the current location in the breadcrumb trail
aria-label on links - Provide context for icon-only breadcrumbs

Best Practices

Keep breadcrumb labels short and descriptive
Always start with "Home" or site name
Use consistent separators (/, >, •)
Ensure sufficient color contrast (WCAG AA minimum)
Make clickable areas large enough for touch (minimum 44x44px)
Don't duplicate breadcrumbs shown elsewhere on the page
Consider collapsing middle items for deep hierarchies (5+ levels)