Navigatsiya · molecule
Yöl satri
Breadcrumbs: ota bölimlar xira havola, joriy sahifa asosiy rangda (aria-current), ajratgiç «/». Uzun oxirgi nom «…» bilan. Ortiqça bölimlar «…» tugmasi ostidagi menyuda (2.100); ota bölimni almaştirgiç — tugma + menyu (2.101).
Anatomiya
- root
.fx-breadcrumbsşart - more (…)
.fx-breadcrumbs__moreixtiyoriy - switch (almaştirgiç)
.fx-breadcrumbs__switchixtiyoriy
Holatlar
current
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter | Ota bölimga ötadi |
| Enter, Space, ↑ ↓ | «…» yoki almaştirgiç menyusini oçadi va band tanlaydi (fx-menu) |
<nav aria-label="Yöl"> + <ol>; oxirgisi aria-current="page".
Naqş: WAI-ARIA APG breadcrumb · rol navigation
Kod
AI uçun: qaçon işlatiladi
Işlating
- Içma-iç sahifalarda qayerdaligini körsatiş.
Işlatmang
- Bir darajali sahifalar →
nav - Joriy sahifani havola qilmang.
- «…» ostiga joriy sahifani yaşirmang — u doim körinadi.
npx foxui add breadcrumbs
<nav aria-label="Yöl"><ol class="fx-breadcrumbs">
<li><a href="#">Mijozlar</a></li>
<li><a href="#">Obunaçilar</a></li>
<li><span aria-current="page">Aziz Karimov</span></li>
</ol></nav>
<nav aria-label="Yöl (qisqartirilgan)"><ol class="fx-breadcrumbs">
<li><a href="#">Boş sahifa</a></li>
<li><button class="fx-breadcrumbs__more" popovertarget="bc-more" aria-haspopup="menu" aria-label="Yaşirin bölimlar">…</button>
<div class="fx-menu" id="bc-more" role="menu" popover data-fx-menu>
<a class="fx-menu__item" role="menuitem" href="#">Mijozlar</a>
<a class="fx-menu__item" role="menuitem" href="#">Obunaçilar</a>
</div></li>
<li><a href="#">2026</a></li>
<li><button class="fx-breadcrumbs__switch" popovertarget="bc-sw" aria-haspopup="menu">Arizalar <svg viewBox="0 0 16 16" aria-hidden="true"><path d="m4 6 4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
<div class="fx-menu" id="bc-sw" role="menu" popover data-fx-menu>
<a class="fx-menu__item" role="menuitem" href="#">Arizalar</a>
<a class="fx-menu__item" role="menuitem" href="#">Buyurtmalar</a>
<a class="fx-menu__item" role="menuitem" href="#">Tölovlar</a>
</div></li>
<li><span aria-current="page">Aziz Karimov</span></li>
</ol></nav>Tokenlar: --fx-bg-muted --fx-bg-pressed --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-sm --fx-font-weight-medium --fx-motion-fast --fx-radius-badge --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-text-primary --fx-text-tertiary
Şu toifadan
Sarlavha havolasiHujjat sarlavhasi yonida «#» havolasi: ustiga kelganda yoki fokusda çiqadi, bosilsa şu bölimga manzil.Orqaga havolasiOta sahifaga qaytiş havolasi (#89): chevron + qisqa nom.Yuqoriga qaytişUzun sahifa yoki panelda bir ekrandan köp aylantirilgaç pastki burçakda çiqadigan tugma (4.151).Buyruqlar oynasiCtrl/⌘+K: hamma sahifa va amalni bir joydan qidiriş.Suhbatlar röyxatiMessenjer çap paneli: avatar (onlayn nuqta), nom, vaqt, oxirgi xabar va belgilar.DockIlovalar yoki bölimlar uçun ikonlar qatori (4.76): kursor ostidagi ikon kattalaşadi, qöşnilari ozroq (macOS Dock kabi), klaviatura fokusida ham.