Gallery

Design a breadcrumb component for a product page with at least four levels of depth. Start with a home or workspace root, then show two or more nested ancestors, ending on the current page. The component should make the user’s location obvious in one glance and allow quick jumps back to higher levels.

Use a separator style that fits the interface and keeps the trail readable at small sizes. The current page should be visually distinct and not behave like a link. Hover and focus states should make each ancestor feel actionable without adding clutter.

Add a long-path version for mobile or narrow containers. Show how the component collapses intermediate levels with an ellipsis or similar pattern while preserving the most useful ancestors. Keep the layout stable when labels are long, and define what happens when the trail overflows its container.