Navigatsiya · pattern
Sayt sarlavhasi
Marketing/hujjat sayti tepa paneli (#85): belgi, asosiy menyu, mega menyu paneli (ustunlar + tavsiya bloki), amallar; telefonda burger tugma (site-drawer'ni oçadi). Mega panel hover (siçqonça) yoki bosiş bilan oçiladi, Esc yopadi, ← → bandlar orasida, ↓ panelga kiradi (foxui.js, data-fx-siteheader). Scroll xulqi (4.156, data-scroll): «hide» — pastga scroll'da yaşirinadi, tepaga qaytganda çiqadi; «shrink» — pastroq va şişasimon böladi; «float» — markazdagi suzuvçi tabletkaga aylanadi (Linear, Aceternity uslubi).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-scroll | hide pastga scroll'da yaşirinadishrink pastroq, şişasimonfloat suzuvçi tabletka | static |
Anatomiya
- root
.fx-site-headerşart - bar
.fx-site-header__barşart - brand
.fx-site-header__brandixtiyoriy - nav
.fx-site-header__navixtiyoriy - list
.fx-site-header__listixtiyoriy - link
.fx-site-header__linkixtiyoriy - trigger (mega oçuvçi)
.fx-site-header__triggerixtiyoriy - mega panel
.fx-site-header__megaixtiyoriy - cols
.fx-site-header__colsixtiyoriy - col
.fx-site-header__colixtiyoriy - col-title
.fx-site-header__col-titleixtiyoriy - mega-link
.fx-site-header__mega-linkixtiyoriy - feature
.fx-site-header__featureixtiyoriy - actions
.fx-site-header__actionsixtiyoriy - burger
.fx-site-header__burgerixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space | Mega panelni oçadi / yopadi |
| ↓ | Oçiq panelning birinçi havolasiga |
| ← → | Menyu bandlari orasida |
| Esc | Panelni yopadi, fokus tugmaga qaytadi |
Disclosure naqşi: tugma aria-expanded + aria-controls; panel oçilganda fokus tugmada qoladi, ↓ panelga kiritadi, Esc yopib fokusni tugmaga qaytaradi. Joriy sahifa aria-current="page". <nav aria-label>.
Naqş: WAI-ARIA APG disclosure · rol navigation
Kod
AI uçun: qaçon işlatiladi
- Marketing sayt, hujjatlar, hamma sahifalarda bir xil tepa navigatsiya.
- Ilova (CRM, kabinet) karkasi →
shell - Telefonda menyu →
site-drawer - Mega panelga forma yoki uzun matn qöymang — havolalar va qisqa tavsif.
- Telefonda mega panelni oçmang — burger va site-drawer.
- Bitta havolali «mega» menyu yasamang — oddiy havola.
- Hujjat yoki ilova sahifasida data-scroll="hide" işlatmang — navigatsiya doim kerak; landing uçun.
npx foxui add site-header
<header class="fx-site-header" data-fx-siteheader data-scroll="float">
<div class="fx-site-header__bar">
<a class="fx-site-header__brand" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5" fill="currentColor"/></svg>Çorsu</a>
<nav class="fx-site-header__nav" aria-label="Asosiy">
<ul class="fx-site-header__list">
<li class="fx-site-header__item">
<button class="fx-site-header__trigger" type="button" aria-expanded="false" aria-controls="mega-mahsulot">Mahsulot <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-site-header__mega" id="mega-mahsulot" hidden>
<div class="fx-site-header__cols">
<div class="fx-site-header__col">
<p class="fx-site-header__col-title">Savdo</p>
<a class="fx-site-header__mega-link" href="#"><strong>Onlayn dökon</strong><span>Katalog, savat va tölov</span></a>
<a class="fx-site-header__mega-link" href="#"><strong>Buyurtmalar</strong><span>Qabul qiliş va yetkaziş</span></a>
</div>
<div class="fx-site-header__col">
<p class="fx-site-header__col-title">Mijozlar</p>
<a class="fx-site-header__mega-link" href="#"><strong>CRM</strong><span>Arizalar va mijozlar bazasi</span></a>
<a class="fx-site-header__mega-link" href="#"><strong>Hisobotlar</strong><span>Sotuv va faollik körsatkiçlari</span></a>
</div>
</div>
<div class="fx-site-header__feature"><strong>Yangi: Dashboard</strong><span>Boş panel va grafiklar bir joyda.</span><a class="fx-link" href="#">Batafsil</a></div>
</div>
</li>
<li><a class="fx-site-header__link" href="#" aria-current="page">Narxlar</a></li>
<li><a class="fx-site-header__link" href="#">Hujjatlar</a></li>
</ul>
</nav>
<div class="fx-site-header__actions"><a class="fx-btn" data-variant="ghost" href="#">Kiriş</a><a class="fx-btn" data-variant="primary" href="#">Boşlaş</a></div>
<button class="fx-btn fx-site-header__burger" data-variant="ghost" data-shape="icon" type="button" commandfor="site-drawer" command="show-modal" aria-label="Menyu"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5h14M3 10h14M3 15h14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
</div>
</header>Tokenlar: --fx-bg-muted --fx-bg-page --fx-bg-pressed --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-dialog-width --fx-ease-emphasized --fx-ease-enter --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-knob-blur --fx-motion-base --fx-motion-fast --fx-motion-shift-sm --fx-motion-slow --fx-motion-slower --fx-popover-width --fx-radius-badge --fx-radius-nav --fx-radius-overlay --fx-radius-surface --fx-shadow-lg --fx-shadow-sm --fx-size-icon-lg --fx-size-icon-sm --fx-size-topbar --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-text-tertiary