Breadcrumb

Standard Breadcrumbs

Create standard breadcrumb navigation using the breadcrumb and breadcrumb-item classes. Add icons, links, and proper ARIA labels to enhance usability and accessibility. The last item should be marked as active with the active class and aria-current="page" attribute to indicate the current page location. Standard breadcrumbs work well for most navigation scenarios and provide clear path information.

Custom Styled Breadcrumbs

Enhance breadcrumbs with custom styles, backgrounds, and separators to match your design system. Use utility classes for spacing, colors, and borders to create visually distinct breadcrumb trails. Customize the separator using the --bs-breadcrumb-divider CSS variable, which accepts text or SVG content. Add badges or other elements to provide additional context about the navigation path or destination.

Responsive Breadcrumbs

Implement responsive breadcrumbs that adapt to different screen sizes to maintain usability across devices. Use utility classes like text-truncate to handle long text, d-none and d-sm-block to control visibility at different breakpoints, and consider alternative presentations for mobile views. Responsive breadcrumbs ensure that navigation remains accessible and usable regardless of the device being used.

Interactive Breadcrumbs

Create enhanced breadcrumb navigation with interactive elements like dropdowns and search functionality. These advanced implementations provide additional navigation options and shortcuts while maintaining the core breadcrumb functionality. Interactive breadcrumbs are particularly useful for complex site structures where users might need to jump between different sections or search within specific content areas.

Accessibility Guidelines

Ensure breadcrumb navigation is accessible to all users by following these best practices:

• Use nav element with aria-label="breadcrumb" to identify the navigation purpose
• Mark current page with aria-current="page" to indicate the current location
• Ensure sufficient color contrast for links and separators (minimum 4.5:1 ratio)
• Provide clear visual hierarchy with consistent styling and spacing
• Include meaningful link text that describes the destination
• Ensure breadcrumbs are keyboard navigable with proper focus states
• Consider screen reader users by using proper semantic markup

Implementation Best Practices

Follow these guidelines to create effective breadcrumb navigation:

• Keep it simple: Limit breadcrumb paths to 3-5 levels to avoid overwhelming users
• Use clear labels: Keep breadcrumb text concise and descriptive
• Consistent placement: Position breadcrumbs at the top of the page, below the main navigation
• Visual distinction: Ensure breadcrumbs are visually distinct from other page elements
• Responsive design: Adapt breadcrumbs for different screen sizes without losing functionality
• Logical hierarchy: Reflect the actual site structure in your breadcrumb path