Menu
The menu element is used to display navigation. It is hidden by default and is shown by adding the active attribute, for example after a trigger click. The MenuItem and MenuLabel components are designed specifically for composing menu content.
Basic usage
This example shows a basic menu with the most common item hierarchy and default spacing.
Inset
This example adds inner padding to the menu so it does not feel attached directly to the container edges.
Variant: Megamenu
This example switches the menu to a megamenu variant suited to wider navigation structures and denser content.
Variant: Nav
This example uses the navigation-oriented menu variant, which is a better fit for moving between sections of an app or site.
Collapse
The collapse attribute displays the menu in collapsed state. In this state, the menu is collapsed and only the icon is displayed.
Attributes and Properties
active
| Description | Controls whether the menu is currently active. |
| Attribute | active |
| Type | boolean |
| Default | - |
collapse
| Description | Controls whether the menu is rendered in collapsed mode. |
| Attribute | collapse |
| Type | boolean |
| Default | - |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native part of the menu. |
CSS Custom Properties
| Name | Description |
|---|---|
--wje-menu-background | Defines the background color of the menu. Accepts any valid CSS color value, such as #ffffff, rgb(255, 255, 255), or CSS variables. |
--wje-menu-border-width | Specifies the width of the menu's border. Accepts any valid CSS length value (e.g., px, em, %). |
--wje-menu-border-style | Sets the style of the menu's border. Common values include solid, dashed, dotted, etc. |
--wje-menu-border-color | Defines the color of the menu's border. Accepts any valid CSS color value. |
--wje-menu-border-radius | Determines the radius of the menu's corners, creating rounded edges. Accepts any valid CSS length value (e.g., px, %). |
--wje-menu-padding-top | Specifies the top padding inside the menu. Accepts any valid CSS length value. |
--wje-menu-padding-bottom | Specifies the bottom padding inside the menu. Accepts any valid CSS length value. |
--wje-menu-padding-inline | Sets the horizontal (left and right) padding inside the menu. Accepts any valid CSS length value. |
--wje-menu-margin-top | Defines the top margin outside the menu. Accepts any valid CSS length value. |
--wje-menu-margin-bottom | Defines the bottom margin outside the menu. Accepts any valid CSS length value. |
--wje-menu-margin-inline | Specifies the horizontal (left and right) margin outside the menu. Accepts any valid CSS length value. |
--wje-menu-collapse-width | Sets the width of the menu when it is collapsed. This property is typically used to define the reduced size of the menu in collapsed state. Accepts any valid CSS length value. |
Slots
| Name | Description |
|---|---|
default | The default slot for the menu. |