ComponentsNavigationBreadcrumb

Breadcrumb

Hierarchical navigation trail showing where the user is. 11 variants, 4 separators, icons and collapsible.

11 variants4 separatorsIconsCollapsibleNumbered steps

Overview

Hierarchical navigation trail showing where the user is. 11 variants, 4 separators, icons and collapsible.

Default breadcrumb

Live preview

Show the current page in relation to its parent levels.

BreadcrumbExample.tsx
tsx
import { Breadcrumb } from 'omverse-ui'
 
const items = [
{ label: 'Home', onClick: () => {} },
{ label: 'Dashboard', onClick: () => {} },
{ label: 'Settings', onClick: () => {} },
{ label: 'Profile', active: true },
]
 
<Breadcrumb items={items} />

Use breadcrumbs in deep hierarchies where moving to a parent level is a common task. Keep labels aligned with destination page titles.

Anatomy

  • Root container and spacing boundary.
  • Primary content and optional secondary metadata.
  • State indicators and utility affordances (icons, badges, controls).
  • Optional helper text, grouping, and behavioral wrappers.

When to use

  • Choose Breadcrumb when a repeated, structured interaction is required.
  • Use it for clear, consistent operations across similar surfaces.
  • Use in forms, lists, and action workflows where clarity matters.

When not to use

  • Do not use only for decorative layout without interaction meaning.
  • Avoid duplicating the same behavior without distinct user context.
  • Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

  • Use semantic structure and visible labels whenever possible.
  • Preserve keyboard navigation and focus visibility.
  • Announce status and changes when context requires it.

Content guidelines

  • Prefer short, clear labels.
  • Keep content actions scannable and outcome-oriented.
  • Use consistent wording across similar components.

Examples

Default

Live preview

Plain text trail with chevron separators — clean and accessible

App.tsx
tsx
import { Breadcrumb } from 'omverse-ui'
 
const items = [
{ label: 'Home', onClick: () => {} },
{ label: 'Dashboard', onClick: () => {} },
{ label: 'Settings', onClick: () => {} },
{ label: 'Profile', active: true },
]
 
<Breadcrumb items={items} />

All 11 variants

Live preview

default · pill · outlined · dark · floating · gradient · underline · arrow · glass · highlight · numbered

default

pill

outlined

dark

floating

gradient

underline

arrow

highlight

glass

numbered

App.tsx
tsx
// 11 visual variants
<Breadcrumb items={items} variant="default" />
<Breadcrumb items={items} variant="pill" />
<Breadcrumb items={items} variant="outlined" />
<Breadcrumb items={items} variant="dark" />
<Breadcrumb items={items} variant="floating" />
<Breadcrumb items={items} variant="gradient" />
<Breadcrumb items={items} variant="underline" />
<Breadcrumb items={items} variant="arrow" />
<Breadcrumb items={items} variant="highlight" />
 
// glass — use on a coloured background
<div style={{ background: 'linear-gradient(135deg,#1E3A8A,#4C1D95)', padding: '12px 16px', borderRadius: 8 }}>
<Breadcrumb items={items} variant="glass" />
</div>

Separators

Live preview

chevron (default) · slash · dot · custom element

chevron

slash

dot

custom →

App.tsx
tsx
<Breadcrumb items={items} separator="chevron" />
<Breadcrumb items={items} separator="slash" />
<Breadcrumb items={items} separator="dot" />
 
// Custom separator
<Breadcrumb items={items} customSeparator={<span style={{ color: 'var(--color-primary)' }}>→</span>} />

With icons

Live preview

icon prop on each BreadcrumbItem adds a leading icon before the label

default + icons

pill + icons

showHomeIcon (auto home on first item)

App.tsx
tsx
const items = [
{ label: 'Home', icon: 'bookmark', onClick: () => {} },
{ label: 'Projects', icon: 'file-text', onClick: () => {} },
{ label: 'Settings', icon: 'settings', onClick: () => {} },
{ label: 'Profile', icon: 'users', active: true },
]
 
<Breadcrumb items={items} />

Collapsible

Live preview

maxItems={3} collapses the middle trail into ··· — click to expand

maxItems=3 (5 items → collapses 2)

pill + maxItems=3

App.tsx
tsx
// maxItems collapses middle items into ···
<Breadcrumb
items={[
{ label: 'Home', onClick: () => {} },
{ label: 'Dashboard', onClick: () => {} },
{ label: 'Projects', onClick: () => {} },
{ label: 'Frontend', onClick: () => {} },
{ label: 'Settings', active: true },
]}
maxItems={3}
/>

Numbered steps

Live preview

numbered variant uses step and stepStatus — done · current · pending

App.tsx
tsx
// numbered variant with step status
const items = [
{ label: 'Account', step: 1, stepStatus: 'done' },
{ label: 'Profile', step: 2, stepStatus: 'done' },
{ label: 'Settings', step: 3, stepStatus: 'current' },
{ label: 'Confirm', step: 4, stepStatus: 'pending' },
]
 
<Breadcrumb items={items} variant="numbered" />

Props / API

Api Props

Props

PropTypeDefaultDescription
itemsBreadcrumbItem[]—Array of breadcrumb items — label, href, icon, active, onClick
variant'default' | 'pill' | 'outlined' | 'dark' | 'floating' | 'gradient' | 'underline' | 'arrow' | 'glass' | 'highlight' | 'numbered''default'Visual style of the breadcrumb trail
separator'chevron' | 'slash' | 'dot' | 'arrow''chevron'Separator style between items
customSeparatorReactNodeundefinedCustom separator element (overrides separator prop)
maxItemsnumber0Max items before collapsing middle items into ··· (0 = show all)
showHomeIconbooleanfalseShows a home icon on the first item