Basecoat UI MCP

# Breadcrumb Component Usage ## Overview The breadcrumb component displays the path to the current resource using a hierarchy of links. It helps users understand their location within the site structure and provides easy navigation back to parent pages. Breadcrumbs are built using semantic HTML with Tailwind utility classes. ## HTML Structure ### Basic Breadcrumb ```html <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5"> <li class="inline-flex items-center gap-1.5"> <a href="/" class="hover:text-foreground transition-colors">Home</a> </li> <li> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="inline-flex items-center gap-1.5"> <a href="/products" class="hover:text-foreground transition-colors">Products</a> </li> <li> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="inline-flex items-center gap-1.5"> <span class="text-foreground font-normal">Laptop</span> </li> </ol> ``` ### Breadcrumb with Home Icon ```html <nav aria-label="Breadcrumb"> <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm"> <li class="inline-flex items-center gap-1.5"> <a href="/" class="hover:text-foreground transition-colors" aria-label="Home"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> </a> </li> <li> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="inline-flex items-center gap-1.5"> <a href="/docs" class="hover:text-foreground transition-colors">Documentation</a> </li> <li> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="inline-flex items-center gap-1.5"> <span class="text-foreground font-normal">Components</span> </li> </ol> </nav> ``` ## Implementation Examples ### E-commerce Breadcrumb ```html <nav aria-label="Breadcrumb" class="py-4"> <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm"> <li class="inline-flex items-center gap-1.5"> <a href="/" class="hover:text-foreground transition-colors">Home</a> </li> <li> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="inline-flex items-center gap-1.5"> <a href="/electronics" class="hover:text-foreground transition-colors">Electronics</a> </li> <li> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="inline-flex items-center gap-1.5"> <a href="/electronics/laptops" class="hover:text-foreground transition-colors">Laptops</a> </li> <li> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="inline-flex items-center gap-1.5"> <span class="text-foreground font-normal">MacBook Pro 16"</span> </li> </ol> </nav> ``` ### Breadcrumb with Dropdown Menu (for Long Paths) ```html <nav aria-label="Breadcrumb"> <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5"> <li class="inline-flex items-center gap-1.5"> <a href="/" class="hover:text-foreground transition-colors">Home</a> </li> <li> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="inline-flex items-center gap-1.5"> <!-- Collapsed items in dropdown --> <div class="relative" data-dropdown> <button type="button" class="flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="1"></circle> <circle cx="19" cy="12" r="1"></circle> <circle cx="5" cy="12" r="1"></circle> </svg> </button> <div class="hidden absolute top-full left-0 mt-1 bg-popover border rounded-md shadow-md p-1 min-w-32 z-50" data-dropdown-menu> <a href="/docs" class="block px-3 py-1.5 text-sm hover:bg-accent rounded">Documentation</a> <a href="/docs/getting-started" class="block px-3 py-1.5 text-sm hover:bg-accent rounded">Getting Started</a> <a href="/docs/components" class="block px-3 py-1.5 text-sm hover:bg-accent rounded">Components</a> </div> </div> </li> <li> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="inline-flex items-center gap-1.5"> <a href="/docs/components/button" class="hover:text-foreground transition-colors">Button</a> </li> <li> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="inline-flex items-center gap-1.5"> <span class="text-foreground font-normal">Examples</span> </li> </ol> </nav> ``` ### Dashboard Breadcrumb ```html <nav aria-label="Breadcrumb" class="mb-6"> <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm"> <li class="inline-flex items-center gap-1.5"> <a href="/dashboard" class="hover:text-foreground transition-colors flex items-center gap-1.5"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect width="7" height="9" x="3" y="3" rx="1"></rect> <rect width="7" height="5" x="14" y="3" rx="1"></rect> <rect width="7" height="9" x="14" y="12" rx="1"></rect> <rect width="7" height="5" x="3" y="16" rx="1"></rect> </svg> Dashboard </a> </li> <li> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="inline-flex items-center gap-1.5"> <a href="/dashboard/projects" class="hover:text-foreground transition-colors">Projects</a> </li> <li> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="inline-flex items-center gap-1.5"> <span class="text-foreground font-normal">Project Alpha</span> </li> </ol> </nav> ``` ### Responsive Breadcrumb ```html <nav aria-label="Breadcrumb"> <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm"> <!-- Always show home --> <li class="inline-flex items-center gap-1.5"> <a href="/" class="hover:text-foreground transition-colors"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> </svg> <span class="sr-only">Home</span> </a> </li> <!-- Hidden on mobile, visible on larger screens --> <li class="hidden sm:inline-flex items-center gap-1.5"> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="hidden sm:inline-flex items-center gap-1.5"> <a href="/category" class="hover:text-foreground transition-colors">Category</a> </li> <li class="inline-flex items-center gap-1.5"> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <!-- Always show current page --> <li class="inline-flex items-center gap-1.5"> <span class="text-foreground font-normal truncate max-w-[200px]">Current Page</span> </li> </ol> </nav> ``` ## Alternative Separators ### Slash Separator ```html <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm"> <li class="inline-flex items-center gap-1.5"> <a href="/" class="hover:text-foreground transition-colors">Home</a> </li> <li class="text-muted-foreground">/</li> <li class="inline-flex items-center gap-1.5"> <a href="/products" class="hover:text-foreground transition-colors">Products</a> </li> <li class="text-muted-foreground">/</li> <li class="inline-flex items-center gap-1.5"> <span class="text-foreground font-normal">Item</span> </li> </ol> ``` ### Arrow Separator ```html <li> <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M5 12h14"></path> <path d="m12 5 7 7-7 7"></path> </svg> </li> ``` ### Dot Separator ```html <li class="text-muted-foreground">•</li> ``` ## Accessibility Guidelines ### Required Attributes ```html <nav aria-label="Breadcrumb"> <ol> <!-- breadcrumb items --> </ol> </nav> ``` ### Current Page Indicator ```html <!-- The current page should not be a link --> <li class="inline-flex items-center gap-1.5"> <span class="text-foreground font-normal" aria-current="page">Current Page</span> </li> ``` ### Screen Reader Considerations - Use `<nav>` with `aria-label="Breadcrumb"` - Use semantic `<ol>` for the list - Mark the current page with `aria-current="page"` - Ensure separators are decorative (hidden from screen readers) ### Complete Accessible Example ```html <nav aria-label="Breadcrumb"> <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm"> <li class="inline-flex items-center gap-1.5"> <a href="/">Home</a> </li> <li aria-hidden="true"> <svg class="size-3.5"><!-- chevron --></svg> </li> <li class="inline-flex items-center gap-1.5"> <a href="/products">Products</a> </li> <li aria-hidden="true"> <svg class="size-3.5"><!-- chevron --></svg> </li> <li class="inline-flex items-center gap-1.5"> <span aria-current="page" class="text-foreground font-normal">Laptop</span> </li> </ol> </nav> ``` ## Best Practices ### When to Use Breadcrumbs - Sites with hierarchical structure (e-commerce, documentation) - Multi-level navigation - When users need to understand their location - When users may need to navigate back to parent pages ### When to Avoid Breadcrumbs - Single-level sites - Linear processes (use a stepper instead) - When the hierarchy doesn't provide useful context ### Content Guidelines - Start with the home page - Show the full path (unless very long) - Keep labels concise - Match labels to page titles - Current page should not be a link ### Visual Guidelines - Place at the top of the content area - Use consistent separators - Ensure adequate contrast - Make touch targets large enough on mobile ### Truncation for Long Paths ```html <li class="inline-flex items-center gap-1.5 max-w-[150px]"> <a href="/category" class="hover:text-foreground transition-colors truncate" title="Very Long Category Name"> Very Long Category Name </a> </li> ``` ## JavaScript Integration ### Dynamic Breadcrumb Generation ```javascript function generateBreadcrumb(path) { const parts = path.split('/').filter(Boolean); const breadcrumb = document.getElementById('breadcrumb'); breadcrumb.innerHTML = ''; // Add home const homeLi = createBreadcrumbItem('/', 'Home', false); breadcrumb.appendChild(homeLi); // Add path parts let currentPath = ''; parts.forEach((part, index) => { currentPath += '/' + part; const isLast = index === parts.length - 1; // Add separator breadcrumb.appendChild(createSeparator()); // Add item const label = part.charAt(0).toUpperCase() + part.slice(1).replace(/-/g, ' '); const li = createBreadcrumbItem(currentPath, label, isLast); breadcrumb.appendChild(li); }); } function createBreadcrumbItem(href, label, isCurrent) { const li = document.createElement('li'); li.className = 'inline-flex items-center gap-1.5'; if (isCurrent) { const span = document.createElement('span'); span.className = 'text-foreground font-normal'; span.setAttribute('aria-current', 'page'); span.textContent = label; li.appendChild(span); } else { const a = document.createElement('a'); a.href = href; a.className = 'hover:text-foreground transition-colors'; a.textContent = label; li.appendChild(a); } return li; } function createSeparator() { const li = document.createElement('li'); li.setAttribute('aria-hidden', 'true'); li.innerHTML = '<svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"></path></svg>'; return li; } ``` ### React/Vue Component Pattern ```javascript // Breadcrumb data structure const breadcrumbs = [ { label: 'Home', href: '/' }, { label: 'Products', href: '/products' }, { label: 'Electronics', href: '/products/electronics' }, { label: 'Laptop', href: null } // Current page, no link ]; ```