Menu
A pure vanilla JS implementation of Zag JS Menu
An accessible dropdown and context menu that is used to display a list of actions or options that a user can choose.
Anatomy
The Menu component consists of the following data-part
trigger
indicator
positioner
content
separator
item
item-group
item-group-label
It can include multiple separator, item, item-group and item-group-label parts.
data-value
is required on all item parts
Group Items
The Menu items can be grouped with a label to identify each group
Please note you must provide and id to item-group
and item-group-label
and not a value
Data attributes
Each menu can be set with different settings with the following data-attribute.
Callbacks
Each Menu component can receive callbacks that can be used to respond to user interaction with custom behavior.
You must add a custom id for the menu and a event listener for your event name
document.getElementById("my-callback-menu")
?.addEventListener("my-callback-menu-event", (event) => {
console.log("Received event:", (event as CustomEvent).detail);
});
Open your browser's console to see the events received when the menu is open or closed
RTL
RTL support for menu
Custom (Tailwind)
If you are using Tailwind styling, you can customize each menu and its parts with Tailwind utilities
Templates
Menu components is available in the followng templates
-
Corex template
Default corex templates. It provides the global, semantic and components tokens
-
Modex template
Based on Corex default template, it adds dark and light mode option to the tokens
-
Themex template
Based on the Corex default template, it adds theming capabilities as well as light and dark mode options to the tokens.