Bileşenler

Breadcrumb

Sayfa başlığının önündeki küçük konum kontrolü: bir geri butonu ve bulunulan sayfanın üstündeki sayfaların menüsü.

TasarımcıGeliştirici

Playground

Ayarlar

Geri butonu

Figma varyantı

🕹 State=Default | Hover | Focus | Active
Back Button=True

Durumlar

Yuvarlak açma düğmesi dururken surface/level-4, hover ve focus’ta surface/level-1 (focus halkasıyla), menü açıkken yukarı oklu primary’dir. Menü, Small Cell’lerden oluşan bir Dropdown’dur; bulunulan sayfa işaretlidir.

Tokenlar

Part	Token
Pill	`--color-surface-level-2, --radius-full, 32px`
Toggle (rest / hover / open)	`--color-surface-level-4 / --color-surface-level-1 / --color-primary`
Arrow (rest / open)	`--color-primary / --color-on-primary`
Menu	`Dropdown, Cell Small`

Figma notları

Bu, eğik çizgilerle ayrılmış klasik bir breadcrumb değil; yol menüdedir.
Menü soldan 16px içeride (bir Spacing örneği) ve hapın 4px altında duruyor.
Sayfadaki Size özelliğinin varyantı yok.
Oklar “Icon/arrow down” ve “Icon/arrow up”; kod arrow-bottom ve arrow-top kullanır.

Figma’dan koda

Figma	React
🕹 State = Default / Hover / Focus	`:hover / :focus-visible`
🕹 State = Active	`menu open`
Back Button	`onBack`
Dropdown items	`items`