Menu

shadow

Menu element slúži na zobrazenie navigácie. V predvolenom stave je schovaný a zobrazí sa pridaním atribútu active napríklad po kliknutí na tlačidlo. Špeciálne pre použitie v Menu sú navrhnuté elementy MenuItem a MenuLabel.

Základné použitie

Ukážka zobrazuje základné menu s najbežnejším rozložením položiek a hierarchie.

Inset

Ukážka pridáva menu vnútorné odsadenie, takže nepôsobí nalepené na okraje kontajnera.

Variant: Megamenu

Ukážka prepína menu do megamenu variantu, ktorý je vhodný pre širšie navigačné štruktúry a viac obsahu naraz.

Variant: Nav

Ukážka používa nav variant menu, teda podobu vhodnú pre klasickú navigáciu medzi sekciami aplikácie alebo webu.

Collapse

Atribút collapse zobrazí menu v zbalenomn stave. V tomto stave je menu zbalené a zobrazuje sa len ikona.

Kedy použiť

Použite wje-menu, keď používateľ potrebuje orientáciu v aplikácii alebo prechod medzi stavmi/obrazovkami.

Kedy nepoužiť

Nepoužívajte viac paralelných navigačných vzorov, ktoré si navzájom konkurujú.

Prístupnosť

Zabezpečte jasné active/selected stavy, predvídateľné poradie tabulátora a pomenovanie ovládacích prvkov.

Odporúčané postupy

• Držte URL a UI stav v synchronizácii, aby bola navigácia reprodukovateľná.
• Používajte konzistentné názvoslovie položiek naprieč menu, breadcrumbom a tabmi.
• Pri hlbokých štruktúrach pridajte pomocný kontext (breadcrumb, nadpis, ikony).

Atribúty a vlastnosti

active

Popis	Určuje, či je menu aktívne.
Atribút	active
Typ	boolean
Predvolené	-

collapse

Popis	Určuje, či sa menu vykreslí v zbalenom režime.
Atribút	collapse
Typ	boolean
Predvolené	-

Udalosti

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS vlastné premenné

Názov	Popis
--wje-menu-background	Vlastná CSS premenná na štýlovanie komponentu (background).
--wje-menu-border-width	Vlastná CSS premenná, ktorá riadi border width.
--wje-menu-border-style	Vlastná CSS premenná na štýlovanie komponentu (border style).
--wje-menu-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-menu-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-menu-padding-top	Vlastná CSS premenná, ktorá riadi padding top.
--wje-menu-padding-bottom	Vlastná CSS premenná, ktorá riadi padding bottom.
--wje-menu-padding-inline	Vlastná CSS premenná, ktorá riadi padding inline.
--wje-menu-margin-top	Vlastná CSS premenná, ktorá riadi margin top.
--wje-menu-margin-bottom	Vlastná CSS premenná, ktorá riadi margin bottom.
--wje-menu-margin-inline	Vlastná CSS premenná, ktorá riadi margin inline.
--wje-menu-collapse-width	Vlastná CSS premenná, ktorá riadi collapse width.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.