Smart Breadcrumbs That Adapt to Mobile and Desktop
If your site has deep categories or long breadcrumb trails, they can quickly break layouts on small screens. The Smart Breadcrumb solves this by showing only the first item, a collapsible dropdown for middle items, and the last N items - all depending on viewport size.
How it works:
1. Always show first item
- Usually “Home” or the root category
2. Collapse middle items on mobile
Any intermediate categories go into a dropdown, keeping the breadcrumb compact
3. Show last N items:
Users can still see the most relevant end of the path (e.g., subcategory + product)
4. Desktop view
Shows full breadcrumb horizontally with all items visible
