Breadcrumb

A trail of links from the top of a hierarchy to the current page, 20px tall, with one of seven separators. A long trail collapses behind an ellipsis that opens it.

import { Breadcrumbs } from '@orvain/react';
 
<Breadcrumbs
  items={[
    { label: 'Home', href: '/', icon: true },
    { label: 'Products', href: '/products' },
    { label: 'Orvain UI' },
  ]}
/>
 
// Collapse long trails
<Breadcrumbs maxItems={4} items={crumbs} />

Add an Orvain Breadcrumb with chevron separators, collapsed after the first crumb: • “Home” • an ellipsis hiding “Workspace” and “Projects” • “Website” and “Design” • “Tokens”, the current page, with a dropdown chevron

Orvain MCPIncluded with the library

When to use#

In hierarchies more than two levels deep: file managers, admin areas, documentation.
Above the page title, so people can see where they are and step back up.

When not to use

Skip it on flat sites with one or two levels, where the navigation already shows the location.

Anatomy#

1Crumb

A 20px home glyph and the label, Satoshi Medium 14 in #6d6d6d, 6px apart.

2Current page

The last crumb, in #2a2a2a and not a link; from four crumbs up it carries a dropdown chevron.

3Separator

Chevron, Right Arrow Head, Forward Slash, Dot, Double Dot, Arrow Head or more-vertical, all #cbcbcb; the gap follows the glyph, 6 to 12px.

4Ellipsis

In a 5+ trail, the crumbs between the first and the last three hide behind it.

States#

Default

Grey label and glyph.

Hover

The label darkens and underlines; with Fill it sits on a 6% pill instead.

Active

The current page.

Icon only

A 20px crumb whose name shows in a dark tooltip above it.

Source#

Preview – final code pending

The Breadcrumb is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

breadcrumbs