Breadcrumb
Paper-layered navigation paths with chromatic light shadows and smooth transitions.
Basic Breadcrumb
A simple breadcrumb navigation with Paper Cut 10 chromatic light shadow.
With Icons
Breadcrumbs enhanced with icons for better visual recognition.
Custom Separator
You can customize the separator between breadcrumb items.
With Ellipsis
Use ellipsis to collapse long breadcrumb paths.
File Path Style
A file explorer style breadcrumb with folder and file icons.
Different Depths
Breadcrumbs work well at various navigation depths.
Bare Variant
Breadcrumbs without the container border, for use inside cards.
Flat Variant
A quiet container style (no shadow) for nested contexts.
Anti-patterns
Avoid stacking shadows. If a breadcrumb sits inside an elevated Card, switch to bare or flat.
Bad: default inside card
Good: flat inside card
Individual Bordered Items
Each path segment has its own paper-styled container with chromatic shadow.