logo x-n ui

Menu (Dropdown)

Menus offer an easy way to build custom, accessible dropdown components with robust support for keyboard navigation.

Basic example

Menu Buttons are built using the x-menu, x-menu:items, and x-menu:toggle components.

The x-menu:toggle will automatically open/close the x-menu:items when clicked, and when the menu is open, the list of items receives focus and is automatically navigable via the keyboard. 

<div x-menu>
    <button x-menu:toggle>More</button>
    <div x-menu:items>
        <ul>
            <li>Account settings</li>
            <li>Documentation</li>
            <li>Invite a friend</li>
        </ul>
    </div>
</div>

Options

Options can be passed as a block or individually using the x-nui directive.

Be sure to change the case type of the option name from "camelCase" to "kebab-case" when passing the options individually.

In block

<div x-nui="{expose:'data'}"></div>

Individually

<div x-nui:expose="data"></div>
name type default description
autoClose boolean, string true Configure the auto close behavior of the dropdown:

true - the dropdown will be closed by clicking outside or inside the dropdown menu.
false - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method.
'inside' - the dropdown will be closed (only) by clicking inside the dropdown menu.
'outside' - the dropdown will be closed (only) by clicking outside the dropdown menu.
trigger string click Sets whether the menu should be displayed on hover or click on the trigger element. Possible values: hover or click
position string bottom-start Sets the placement of the dropdown menu. Possible values: auto| auto-start| auto-end| top| top-start| top-end| bottom| bottom-start| bottom-end| right| right-start| right-end| left| left-start| left-end
display string dynamic By default, we use Popper for dynamic positioning. Disable this with static.
offset string, array 0,2 Offset of the dropdown relative to its target. You can pass a string in attribute with comma separated values like: x-nui:offset='10,20'.
strategy string absolute Describes the positioning strategy to use. Possible values: absolute or fixed
toggleFirstChild boolean false Tells you to toggle the visibility of the first child of the menu.
expose null,string null Exposes the component api. Receives the name of the variable where the component api will be exposed

API Component

The component API is an object that contains the following properties:

name type description
main element Element where it is found: x-menu
toggle null,element Element where it is found: x-menu:toggle
menu null,element Element where it is found: x-menu:items
show boolean Determines the visibility of the dropdown menu.

Class Names

CSS classes that are added to describe a state.

name description
open Set to x-menu:toggle and x-menu:items when the dropdown menu is visible.

.wrapper

Tells you that the element is a container and that you should toggle the visibility of the first element. It works the same as the toggleFirstChild option. It can only be applied to x-menu:items.