Orvain UI

Breadcrumb blocks

Breadcrumbs are a single-line trail of links from a root page down to the one being read, separated by a repeated glyph, showing where the current page sits in a hierarchy and giving one click back to every level above it.

Get Pro to installPro21 blocksReact, Vue and Figma
MCPConnect the MCP server

Every block in the set#

Chevron

The default trail: docs, file browsers, nested settings

Right arrow head

Denser chrome, where the separator should sit closer to the crumb behind it

Forward slash

Paths and URLs, where the trail is a literal address

Dot

Quiet trails that sit under a page title and should not compete with it

Double dot

Trails that need a mark with no direction: a hierarchy read by nesting, not by travel

Arrow head

The same arrow with even spacing on both sides

More vertical

Toolbars where the separator should read as a rule rather than a glyph

Chevron, folded

Docs and file browsers whose trail can be longer than its room

Dot, under a title

Page headers where the trail must stay quiet and never change the header's height

More vertical, folded toolbar

Document toolbars with avatars and a Share action beside the trail

Chevron, opens

Docs sites and file explorers, where a level should be one pick away

Forward slash, switcher

Dev-tool headers: workspace, project and branch, each one switch away

Double dot, switcher

Help centres: move to another section or article without going back up

Arrow head, editor path

Code editors and file browsers: the bar is the fastest way between files

Double dot, peek

Trails where a level needs a hint before you leave the page

Right arrow head, path

A drive or file tree, where the trail is a path you can walk and copy

Right arrow head, glide

Settings and admin pages, where the trail should read like the segmented controls around it

Dot, sticky

Long articles and docs, where the header trail scrolls away

Arrow head, back

App headers and phones, where the way back matters most

More vertical, glide toolbar

Document toolbars with Preview and Share next to the trail

Forward slash, address

File and route paths, where people may want to type the address

When to use#

  • Content sits more than two levels deep and people arrive mid-tree from search
  • A file or asset browser where each parent is a real place you can open
  • Settings panels nested under sections, where the page heading alone does not say which section owns them
  • You need a way back up that costs one line instead of a sidebar

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans