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.

Dynamic & Smart Breadcrumbs

Create intelligent breadcrumbs that adapt to user context, show additional information, and provide enhanced navigation capabilities. These examples demonstrate breadcrumbs with real-time updates, contextual actions, and smart truncation for complex navigation hierarchies.

Specialized Use Cases

Industry-specific breadcrumb implementations for specialized applications like e-commerce, content management, project management, and data exploration interfaces. These examples show how breadcrumbs can be tailored for specific user workflows and business requirements.

Advanced Navigation Patterns

Complex breadcrumb patterns that combine multiple navigation concepts, including breadcrumbs with tabs, filters, search integration, and multi-dimensional navigation. These patterns are useful for sophisticated applications with complex information architectures.

Developer Tips & Best Practices

class BreadcrumbManager {
  constructor(containerId = 'breadcrumb-container') {
    this.container = document.getElementById(containerId);
    this.history = [];
    this.maxItems = 5;
    this.truncateThreshold = 4;
  }

  // Generate breadcrumb from current URL path
  generateFromPath(customLabels = {}) {
    const path = window.location.pathname;
    const segments = path.split('/').filter(segment => segment);

    this.clear();
    this.addItem('Home', '/', 'ri-home-line');

    let currentPath = '';
    segments.forEach((segment, index) => {
      currentPath += '/' + segment;
      const label = customLabels[segment] || this.formatSegment(segment);
      const isLast = index === segments.length - 1;

      if (isLast) {
        this.addItem(label, null); // Current page, no link
      } else {
        this.addItem(label, currentPath);
      }
    });
  }

  // Add a breadcrumb item
  addItem(label, href = null, icon = null) {
    const item = { label, href, icon, timestamp: Date.now() };
    this.history.push(item);

    if (this.history.length > this.maxItems) {
      this.truncate();
    }

    this.render();
  }

  // Smart truncation for long paths
  truncate() {
    if (this.history.length <= this.truncateThreshold) return;

    // Keep first item (home), last 2 items, and add ellipsis
    const truncated = [
      this.history[0], // Home
      { label: '...', href: null, icon: 'ri-more-line', truncated: true },
      ...this.history.slice(-2) // Last 2 items
    ];

    this.history = truncated;
  }

  // Render breadcrumb HTML
  render() {
    if (!this.container) return;

    const nav = document.createElement('nav');
    nav.setAttribute('aria-label', 'Breadcrumb navigation');

    const ol = document.createElement('ol');
    ol.className = 'breadcrumb mb-0';

    this.history.forEach((item, index) => {
      const li = this.createBreadcrumbItem(item, index === this.history.length - 1);
      ol.appendChild(li);
    });

    nav.appendChild(ol);
    this.container.innerHTML = '';
    this.container.appendChild(nav);
  }

  // Create individual breadcrumb item
  createBreadcrumbItem(item, isLast) {
    const li = document.createElement('li');
    li.className = 'breadcrumb-item' + (isLast ? ' active' : '');

    if (isLast) {
      li.setAttribute('aria-current', 'page');
    }

    if (item.href && !isLast) {
      const a = document.createElement('a');
      a.href = item.href;
      a.innerHTML = this.formatItemContent(item);
      li.appendChild(a);
    } else {
      li.innerHTML = this.formatItemContent(item, isLast);
    }

    return li;
  }

  // Format item content with icons
  formatItemContent(item, isLast = false) {
    const iconHtml = item.icon ? `<i class="${item.icon} me-1"></i>` : '';
    return iconHtml + item.label;
  }

  // Format URL segment to readable label
  formatSegment(segment) {
    return segment
      .replace(/-/g, ' ')
      .replace(/([a-z])([A-Z])/g, '$1 $2')
      .split(' ')
      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
      .join(' ');
  }

  // Clear all breadcrumb items
  clear() {
    this.history = [];
  }

  // Add structured data for SEO
  addStructuredData() {
    const structuredData = {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": this.history.map((item, index) => ({
        "@type": "ListItem",
        "position": index + 1,
        "name": item.label,
        "item": item.href ? window.location.origin + item.href : undefined
      }))
    };

    let script = document.querySelector('script[type="application/ld+json"]');
    if (!script) {
      script = document.createElement('script');
      script.type = 'application/ld+json';
      document.head.appendChild(script);
    }

    script.textContent = JSON.stringify(structuredData);
  }
}

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