Breadcrumb Navigation

Hierarchical path indicators with multiple separator styles, responsive collapsing, and interactive tree navigation.

Separator Styles
Preview
Responsive Collapse
Long breadcrumb paths collapse middle items into an expandable ellipsis.
Deep Path
Size Variants
Small
  1. Dashboard
  2. Settings
  3. Profile
Default
  1. Dashboard
  2. Settings
  3. Profile
Large
  1. Dashboard
  2. Settings
  3. Profile
Interactive File Tree
Click nodes in the tree below to update the breadcrumb path.
Current Path
Full path: /root
root
src
components
Button.tsx
Modal.tsx
Nav.tsx
utils
helpers.ts
format.ts
public
images
index.html
package.json
README.md