@casoon/dragonfly/ui/components/breadcrumbs.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Breadcrumbs
 * 
 * Breadcrumbs show the hierarchical path to the current page, helping users 
 * understand their location within the site structure and navigate back to 
 * higher-level pages.
 * 
 * @layer: components
 * 
 * Accessibility:
 * - Use nav element with aria-label="Breadcrumb"
 * - Use ordered list (ol) for the breadcrumb items
 * - Current page should have aria-current="page"
 */

@layer components {
  /* Breadcrumbs container */
  .breadcrumbs {
    align-items: center;
    color: var(--color-text-500, #6b7280);
    display: flex;
    font-size: var(--text-sm, 0.875rem);
    margin: var(--space-2) 0;
    padding: var(--space-2);
  }
  
  /* Breadcrumbs list */
  & .list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  /* Breadcrumb item */
  & .item {
    align-items: center;
    display: flex;
  }
  
  /* Breadcrumb separator */
  & .separator {
    align-items: center;
    color: var(--color-text-300);
    display: inline-flex;
    margin: 0 var(--space-2);
  }
  
  /* Default separator icon (can be customized) */
  & .separator::before {
    content: "/";
    font-size: 0.85em;
  }
  
  /* Breadcrumb link */
  & .link {
    color: var(--color-primary-500);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  & .link:hover {
    color: var(--color-primary-700, #1d4ed8);
    text-decoration: underline;
  }
  
  /* Current page (last item) */
  & .current {
    color: var(--color-text-900, #111827);
    font-weight: var(--font-medium, 500);
  }
  
  /* Truncated breadcrumbs for narrow viewports */
  .breadcrumbs--truncated & .item {
    display: none;
  }
  
  .breadcrumbs--truncated & .item:first-child,
  .breadcrumbs--truncated & .item:nth-last-child(2),
  .breadcrumbs--truncated & .item:last-child {
    display: flex;
  }
  
  /* Ellipsis for truncated items */
  .breadcrumbs--truncated & .item:nth-last-child(2)::before {
    color: var(--color-text-300);
    content: "...";
    margin: 0 var(--space-2);
  }
  
  /* Responsive adjustments */
  @media (max-width: 640px) {
    .breadcrumbs {
      font-size: var(--text-xs, 0.75rem);
    }
    
    /* Auto-truncate on mobile */
    .breadcrumbs:not(.breadcrumbs--keep-all) & .item:not(:first-child, :last-child) {
      display: none;
    }
    
    .breadcrumbs:not(.breadcrumbs--keep-all) & .item:first-child + & .item:not(:last-child) {
      display: flex;
    }
    
    .breadcrumbs:not(.breadcrumbs--keep-all) & .item:first-child + & .item::before {
      color: var(--color-text-300);
      content: "...";
      margin: 0 var(--space-2);
    }
  }
}