CleenUI · Navigation · Breadcrumb

Breadcrumb

Path indicator with item separators, dropdown overflow for long paths, and home/back links.

storybook.cleenui.com · navigation-breadcrumb--static
Open in new window

About Breadcrumb

Breadcrumb shows the user where they are in a hierarchy and lets them jump back up to any ancestor. The component handles long paths gracefully — items in the middle collapse into a more-menu when space is tight.

Custom separators (chevron, slash, dot) and per-item icons let the visual style match the rest of the design system. The component derives state from React Router by default, but can be controlled directly for non-route hierarchies.

When to use it

  • Page-level location indicators (Home / Products / Category / Item).
  • Detail-view path context (User / Account / Subscription).
  • Nested folder navigation in file managers.
  • Documentation chapter context.

Common props

Prop
Type
Description
items
{ label, href, icon }[]
Ordered breadcrumb items.
separator
ReactNode
Separator between items (default: chevron).
maxVisible
number
Maximum visible items before overflow menu.
showHome
boolean
Prepend a home icon link.
size
"sm" | "md"
Typography size.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.