Skip to content
DOL Studio

Breadcrumb

Design: Stable Code: Coded navhierarchy 5 Figma sets .Breadcrumb Item master

Live preview

Chevron separator (default)
Slash separator
Dot separator
With leading icon (home)
Sizes — sm / md / lg

Import & files

Import
import { Breadcrumb } from "@dol/ui/breadcrumb";
Source file
packages/@dol/ui/src/breadcrumb/Breadcrumb.tsx

Figma source

Figma source 5 sets
Page
Breadcrumb
Sets
5
Primary set
.Breadcrumb Item master · 2 variants Open in Figma →
Showing: .Breadcrumb Item master
4 other sets
  • Breadcrumb group/Gray 4 variants Figma →
  • Breadcrumb group/Primary 4 variants Figma →
  • Breadcrumb Item 24 variants Figma →
  • Breadcrumb Item/Arrow 12 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Breadcrumb
Slug: `breadcrumb`
Domain: general · Category: navigation
Design: stable · Code: coded


## Description
Hierarchical navigation trail - item master + arrow separator.


## Import
```ts
import { Breadcrumb } from "@dol/ui/breadcrumb";
```
Source: `packages/@dol/ui/src/breadcrumb/Breadcrumb.tsx`


## Figma source
Page: Breadcrumb
Sets: 5
Primary: .Breadcrumb Item master
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=21925-26699

Related

  • L
    lms

    LMS Role Sidebar

    Design only
  • Pressed

    Tabbar, Toggle

    Coded
  • S
    nav

    Sidebar

    Coded
    1. 1
    2. 2
      2
    3. 3
      3

    Steps

    Coded

  • Pagination

    Coded
  • Nav item

    NavItem

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).