Menu

shadow

The menu element is used to display the navigation. It is hidden by default and is displayed by adding the active attribute, for example, when a button is clicked. The MenuItem and MenuLabel elements are designed specifically for use in Menus.

Basic usage

The sample shows a basic menu with the most common layout of items and hierarchy.

Inset

The preview adds an internal indentation to the menu, so it doesn't feel stuck to the edges of the container.

Variant: Megamenu

The demo switches the menu to the megamenu variant, which is suitable for wider navigation structures and more content at once.

Variant: Nav

The sample uses the nav menu variant, i.e. a form suitable for classic navigation between sections of an application or website.

Collapse

The collapse attribute displays the menu in collapsed state. In this state, the menu is collapsed and only the icon is displayed.

When to use

Use wje-menu when the user needs to navigate the application or switch between states/screens.

When not to use

Do not use multiple parallel navigation patterns that compete with each other.

Accessibility

Provide clear active/selected states, predictable tab order, and naming of controls.

Recommended practices

• Keep the URL and UI state in sync to make the navigation reproducible.
• Use consistent terminology for items across menus, breadcrumb and tabs.
• For deep structures, add auxiliary context (breadcrumb, title, icons).

Attributes and properties

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é	-

Events

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

Metódy

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

CSS shadow parts

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

CSS custom variables

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.