ComponentsNavigationBreadcrumb

Breadcrumb

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

11 variants4 separatorsIconsCollapsibleNumbered steps

Default

Live preview

Plain text trail with chevron separators — clean and accessible

App.tsx

tsx

1import { Breadcrumb } from 'omverse-ui'
2 
3const items = [
4  { label: 'Home',      onClick: () => {} },
5  { label: 'Dashboard', onClick: () => {} },
6  { label: 'Settings',  onClick: () => {} },
7  { label: 'Profile',   active: true },
8]
9 
10<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

1// 11 visual variants
2<Breadcrumb items={items} variant="default" />
3<Breadcrumb items={items} variant="pill" />
4<Breadcrumb items={items} variant="outlined" />
5<Breadcrumb items={items} variant="dark" />
6<Breadcrumb items={items} variant="floating" />
7<Breadcrumb items={items} variant="gradient" />
8<Breadcrumb items={items} variant="underline" />
9<Breadcrumb items={items} variant="arrow" />
10<Breadcrumb items={items} variant="highlight" />
11 
12// glass — use on a coloured background
13<div style={{ background: 'linear-gradient(135deg,#1E3A8A,#4C1D95)', padding: '12px 16px', borderRadius: 8 }}>
14  <Breadcrumb items={items} variant="glass" />
15</div>

Separators

Live preview

chevron (default) · slash · dot · custom element

chevron

slash

dot

custom →

App.tsx

tsx

1<Breadcrumb items={items} separator="chevron" />
2<Breadcrumb items={items} separator="slash" />
3<Breadcrumb items={items} separator="dot" />
4 
5// Custom separator
6<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

1const items = [
2  { label: 'Home',     icon: 'bookmark', onClick: () => {} },
3  { label: 'Projects', icon: 'file-text', onClick: () => {} },
4  { label: 'Settings', icon: 'settings',  onClick: () => {} },
5  { label: 'Profile',  icon: 'users',     active: true },
6]
7 
8<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

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

Numbered steps

Live preview

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

App.tsx

tsx

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

Props

PropTypeDefaultDescription

itemsBreadcrumbItem[]—Array of breadcrumb items — label, href, icon, active, onClick

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