Breadcrumbs — Wildeye Design System

Try it

Select an ancestor to go up to it. At depth 6, turn on Truncate and open the hidden levels.

Depth

Separator

Size

Truncate

<WildBreadcrumbs
  :items="items"
  separator="chevron"
  size="md"
  @click="goTo"
/>

When to use

Use breadcrumbs on pages below the top level, so someone arriving from an alarm email can see where they are.
Put the trail above the page title, starting at the account.

Don’t use it

On a top-level page, which has nothing above it. The page title is enough.
To switch between views of one page. Use Tabs.
As the main navigation. Use the App sidebar.

Anatomy

<WildBreadcrumbs :items="items" />

Ancestors are grey links. The last crumb is the current page: darker, heavier and not a link.

Separators

The default is chevron. Use one style across the product.

chevron

slash

dot

<WildBreadcrumbs :items="items" separator="slash" />

Sizes

The default is md. Below 640px wide, md and lg step down a size.

sm · 12

md · 13

lg · 14

<WildBreadcrumbs :items="items" size="sm" />

Truncation

Set maxItems when the trail won’t fit on one line. The middle collapses into an ellipsis, and the ends stay.

<WildBreadcrumbs :items="items" :max-items="3" />

Set it to 3. The root says which account you’re in, and the last two say where you are. The ellipsis shows the rest.

Content

Use each page’s own title as its crumb, so the trail matches the headings.
Keep crumbs short. Each stops at 200px, or 120px on a phone, and ends in an ellipsis.

Accessibility

The trail is a navigation landmark named Breadcrumb, and a list, so a screen reader announces how many crumbs it holds. The last crumb is marked as the current page and isn’t in the tab order.

Key	What it does
Tab	Moves through the ancestors and the ellipsis, in order.
Enter	Opens the focused level.
Enter / Space	On the ellipsis, shows the hidden levels and focuses the first.

Props

Prop	Type	Default	Description
items	BreadcrumbItem[]	—	The trail, root first and current page last.
items[].label	string	—	The crumb text.
items[].href	string	—	The page the crumb opens. Give every ancestor one.
items[].disabled	boolean	false	Shows the crumb as text that can’t be opened.
separator	'chevron' \| 'slash' \| 'dot'	'chevron'	The mark between crumbs.
maxItems	number	0	Crumbs shown before the middle collapses. 0 shows all.
size	'sm' \| 'md' \| 'lg'	'md'	Text size: 12, 13 or 14px.
onClick	(item, index) => void	—	Runs for an ancestor without an href.

Tokens

Token	Value	Where it lands
--font-size-sm / md / base	12 / 13 / 14px	Crumb text at sm, md and lg.
(no token)	#4F4D55	Ancestor text.
--global-blue-1100	#0C296A	Ancestor text on hover, 12.75:1 on the hover ground.
--color-primary-light	#EBFAFF	Ancestor ground on hover.
--color-grey-1000	#2D2B32	The current page.
--font-weight-semibold	500	The current page.
--color-grey-700	#ADACB0	Separators and disabled crumbs.
--radius-sm	4px	Hover ground corners.
--color-primary-active	#1877F2	Keyboard focus ring.
--duration-normal	150ms	Hover and focus transitions.