App Breadcrumbs
Breadcrumb patterns for SaaS apps and internal tools — workspace context, team/project paths, collapsible deep nav, status-aware crumbs, inline editable page names, notification badges, and breadcrumb action bars.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — dark for internal tools, light for client-facing dashboards. |
| accentColor | string | "#6366f1" | Applied to workspace avatar, tab underline, status dot glow, notification badge, and action button hover. |
| workspaceName | string | "Acme Corp" | Org/workspace name shown in WorkspaceBreadcrumb and TeamspaceBreadcrumb. |
| maxDepth | number | 2 | Number of crumbs visible on each side of the '···' collapse in DeepNavBreadcrumb (1–3). |
When to Use
Perfect for Notion-style tools, project management apps, admin panels, and any product with workspace/org hierarchy. DeepNavBreadcrumb handles 5+ level paths gracefully.
Best Practices
Use WorkspaceBreadcrumb with real org avatars for personalization. EditableBreadcrumb works best when the last crumb is a page/doc name the user controls.
Why This Component Matters
In deep SaaS apps, users constantly need to know where they are and how to get back — a context-aware breadcrumb reduces friction and supports multi-level navigation without full page loads.
FAQ
QHow does EditableBreadcrumb work?
Clicking the last crumb swaps it for an inline input. Pressing Enter or blurring the field commits the new name back to display mode.
QCan DeepNavBreadcrumb handle dynamic paths?
Yes — pass an array of crumb objects and it automatically collapses the middle items into an expandable '···' pill when the path exceeds 4 levels.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.