MenuItem
The MenuItem is a child of the Menu. element and represents a navigation item within it. It can display a submenu with additional navigation items and also allows icons to be displayed. For examples of using MenuItem, go to the [Menu] element documentation page(./menu).
Basic use
This sample shows wje-menu-item in its most common context: as part of an active wje-menu with icons, separators and nested submenu items.
No variants
With nav style, it is important to observe how items behave when nested, checked state and the combination of start, end and submenu slots.
When to use
Use wje-menu-item when the user needs to navigate the application or transition 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
customEvent
| Popis | Nastavuje textovú hodnotu uloženú vo voľbe custom-event. |
| Atribút | custom-event |
| Typ | string |
| Predvolené | - |
Events
| Názov | Popis |
|---|---|
wje-menu-item:click | Vyvolá sa pri kliknutí na komponent. |
Methods
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS shadow parts
| Názov | Popis |
|---|---|
native | Štýluje koreňovú shadow časť komponentu. |
submenu | Štýluje shadow časť submenu. |
CSS custom variables
| Názov | Popis |
|---|---|
--wje-menu-item-color | Vlastná CSS premenná, ktorá riadi color. |
--wje-menu-item-background | Vlastná CSS premenná na štýlovanie komponentu (background). |
--wje-menu-item-color-hover | Vlastná CSS premenná, ktorá riadi color hover. |
--wje-menu-item-background-hover | Vlastná CSS premenná na štýlovanie komponentu (background hover). |
--wje-menu-item-color-focus | Vlastná CSS premenná, ktorá riadi color focus. |
--wje-menu-item-background-focus | Vlastná CSS premenná na štýlovanie komponentu (background focus). |
--wje-menu-item-color-active | Vlastná CSS premenná, ktorá riadi color active. |
--wje-menu-item-background-active | Vlastná CSS premenná na štýlovanie komponentu (background active). |
--wje-menu-item-padding-top | Vlastná CSS premenná, ktorá riadi padding top. |
--wje-menu-item-padding-bottom | Vlastná CSS premenná, ktorá riadi padding bottom. |
--wje-menu-item-line-height | Vlastná CSS premenná, ktorá riadi výšku riadku. |
--wje-menu-submenu-offset | Vlastná CSS premenná na štýlovanie komponentu (menu submenu offset). |
--wje-menu-item-icon-visibility | Vlastná CSS premenná na štýlovanie komponentu (icon visibility). |
--wje-menu-item-safe-triangle-cursor-x | Vlastná CSS premenná na štýlovanie komponentu (safe triangle cursor x). |
--wje-menu-item-safe-triangle-cursor-y | Vlastná CSS premenná na štýlovanie komponentu (safe triangle cursor y). |
--wje-menu-item-safe-triangle-submenu-start-x | Vlastná CSS premenná na štýlovanie komponentu (safe triangle submenu start x). |
--wje-menu-item-safe-triangle-submenu-start-y | Vlastná CSS premenná na štýlovanie komponentu (safe triangle submenu start y). |
--wje-menu-item-safe-triangle-submenu-end-x | Vlastná CSS premenná na štýlovanie komponentu (safe triangle submenu end x). |
--wje-menu-item-safe-triangle-submenu-end-y | Vlastná CSS premenná na štýlovanie komponentu (safe triangle submenu end y). |
Slots
| Názov | Popis |
|---|---|
default | Predvolený slot pre hlavný obsah komponentu. |
start | Slot pre obsah zobrazený pred hlavným obsahom. |
end | Slot pre obsah zobrazený za hlavným obsahom. |
submenu | Slot pre vlastný obsah submenu v komponente. |