This components follows A11y standards so aria attributes and keyboard interactions are managed automatically.

For accessibility purpose use <nav></nav> with an accessible name assigning [aria-label] or [aria-labelledby] on .xt-drop.

SyntaxDefault / ArgumentsDescription
Optiona11y:Object|false<Object>Aria options
Optiona11y.role:String|false'popup'Inject role and related attributes, can be 'popup', 'dialog', 'tooltip', 'carousel', also if has container and targets and no divs between 'tablist', 'menu', 'listbox'
Optiona11y.labelElements:BooleanfalseInject aria-labelledby attributes on elements (linking to targets)
Optiona11y.labelTargets:BooleanfalseInject aria-labelledby attributes on targets (linking to elements)
Optiona11y.controls:BooleantrueInject aria-controls attributes
Optiona11y.selected:BooleanfalseInject aria-selected attributes
Optiona11y.expanded:BooleantrueInject aria-expanded attributes
Optiona11y.live:BooleantrueInject aria-live attributes on auto
Optiona11y.disabled:BooleantrueInject aria-disabled attributes on enable/disable
Optiona11y.keyboard:BooleantrueAutomatic keyboard next, previous and exit interactions
Optiona11y.vertical:BooleanfalseVertical arrows instead of horizontal for keyboard events
Optiona11y.items:String|false'a, button'Navigate activated target with arrows and search when typing

Do not rely/use aria attributes, they are generated and they can change anytime.

Disabled and Nested

If you want to disable the component use the options.disabled.

SyntaxDefault / ArgumentsDescription
Optiondisabled:BooleanfalseDisable the component
OptiondisableDeactivate:BooleantrueDeactivate automatically on disable and destroy

With nested selectors change the elements and targets query.

Example of component disabled on desktop with match media.

Match Media

You can add additional options that gets added on match media query. You can use different queries with different and nested options.

SyntaxDefault / ArgumentsDescription
Optionmatches:ObjectfalseAdd additional options on match media query


Use <div class="xt-backdrop z-below bg-gray-900 opacity-25"></div> inside .xt-drop to add a customizable backdrop.

Use on:z-drop to have the button above the backdrop.

Focus Limit

For accessibility purpose on activation you can limit the focus inside the current activated targets.

SyntaxDefault / ArgumentsDescription
OptionfocusLimit:BooleantrueAutomatically limit focus on activation inside current targets
OptionfocusTrap:Object{ initialFocus: false, preventScroll: true, allowOutsideClick: true }Options to pass to Focus Trap


On sequential activation you can automatically set zIndex of activated elements and targets.

It's better to keep the start value like the css one, but you can change the factor on activation.

SyntaxDefault / ArgumentsDescription
OptionzIndex:Object|false{ targets: { start: 400, factor: -1 } }Set z-index on activation, can be elements, targets, elementsInner, targetsInner

Reset to Current

Resets to current automatically on deactivation.


SyntaxDefault / ArgumentsDescription
Optiondebug:BooleanfalseDebug on console
OptionvisibleReinit:BooleanfalseReinit when self.container becomes visible with display only one time and only if not already visible