Navigatsiya · molecule
Yon menyu
Yon menyu (S1): band 40, ikonka + nom (bitta qator «…»), son — xira pill, tanlangan — brend tusi; guruh sarlavhasi, içki bandlar uzuq yöl çiziğida, pastki bandlar tagda. Yiğilgan holat (data-collapsed) — ikonkalar ustuni, karkas xulqi bilan. Kengaytma: data-pinned (sevimlilar guruhi), .fx-nav__new (“Yangi” belgisi) / [data-new] nuqta, .fx-nav__search.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-collapsed | offon Karkas xulqi qöyadi (Ctrl/⌘+B). | off |
data-pinned | true | — |
Anatomiya
- root
.fx-navşart - group
.fx-nav__groupixtiyoriy - title
.fx-nav__titleixtiyoriy - item
.fx-nav__itemşart - label
.fx-nav__labelşart - count
.fx-nav__countixtiyoriy - subs
.fx-nav__subsixtiyoriy - toggle
.fx-nav__toggleixtiyoriy - chev
.fx-nav__chevixtiyoriy - foot
.fx-nav__footixtiyoriy - new
.fx-nav__newixtiyoriy - search
.fx-nav__searchixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter | Bandga ötadi |
| Enter, Space | Guruh tugmasida — içki bandlarni oçadi/yopadi |
Joriy sahifa aria-current="page".
Naqş: WAI-ARIA APG landmarks · rol navigation
Kod
AI uçun: qaçon işlatiladi
- Ilova yon menyusi: bölimlar orasida ötiş.
- Bir sahifa içidagi körinişlar →
tabs - Tanlangan bandga çap rangli çiziq yoki qora pill qöymang — brend tusi.
- Uzun nomni ikki qatorga tuşirmang va şriftni kiçraytirmang — «…» va title.
npx foxui add nav
<nav class="fx-nav" aria-label="Asosiy" data-fx-nav>
<div class="fx-nav__group">
<a class="fx-nav__item" href="#" ><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 9.5 10 4l7 5.5V16a1 1 0 0 1-1 1h-3.5v-4.5h-5V17H4a1 1 0 0 1-1-1z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="fx-nav__label">Boş sahifa</span></a>
<a class="fx-nav__item" href="#"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 11h4l1 2h4l1-2h4M4 5h12l1 6v5H3v-5z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="fx-nav__label">Arizalar</span><span class="fx-nav__count">12</span></a>
</div>
<div class="fx-nav__group">
<div class="fx-nav__title">Mijozlar</div>
<a class="fx-nav__item" href="#"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M7 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM2 17c0-3 2.2-5 5-5s5 2 5 5M13 4a3 3 0 0 1 0 6M15 12c1.8.5 3 2.3 3 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="fx-nav__label">Hammasi</span></a>
<div class="fx-nav__subs">
<a class="fx-nav__item" href="#"><span class="fx-nav__label">Obunaçilar</span></a>
<a class="fx-nav__item" href="#"><span class="fx-nav__label">Juda uzun nomli bölim nomi şu yerda kesiladi</span></a>
</div>
</div>
<div class="fx-nav__group">
<div class="fx-nav__title">Hisob</div>
<button class="fx-nav__item fx-nav__toggle" type="button" aria-expanded="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5 9h10v8H5zM7 9V6a3 3 0 0 1 6 0v3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="fx-nav__label">Kiriş boşqaruvi</span><svg class="fx-nav__chev" viewBox="0 0 256 256" aria-hidden="true"><path fill="currentColor" d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></button>
<div class="fx-nav__subs">
<a class="fx-nav__item" href="#"><span class="fx-nav__label">Autentifikatsiya</span></a>
<a class="fx-nav__item" href="#" aria-current="page"><span class="fx-nav__label">Ulangan ilovalar</span></a>
<a class="fx-nav__item" href="#"><span class="fx-nav__label">Faol seanslar</span></a>
</div>
</div>
<div class="fx-nav__foot"><a class="fx-nav__item" href="#"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM10 2v2M10 16v2M2 10h2M16 10h2M4.3 4.3l1.4 1.4M14.3 14.3l1.4 1.4M4.3 15.7l1.4-1.4M14.3 5.7l1.4-1.4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="fx-nav__label">Sozlamalar</span></a></div>
</nav>
<nav class="fx-nav" aria-label="Asosiy"><div class="fx-nav__group" data-pinned><p class="fx-nav__title">Sevimlilar</p><a class="fx-nav__item" href="#"><span class="fx-nav__label">Hisobotlar</span><span class="fx-nav__new">Yangi</span></a></div></nav>Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-muted --fx-bg-pressed --fx-bg-surface --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-knob-pill --fx-motion-base --fx-motion-fast --fx-nav-item-height --fx-nav-subitem-height --fx-nav-width --fx-nav-width-collapsed --fx-radius-badge --fx-radius-circle --fx-radius-nav --fx-radius-pill --fx-size-icon-md --fx-size-icon-sm --fx-size-status-dot-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary