Other
Drop
Toggle

Accessibility

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.

	Syntax	Default / Arguments	Description
Option	`a11y:Object\|false`	`<Object>`	Aria options
Option	`a11y.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'`
Option	`a11y.labelElements:Boolean`	`false`	Inject `aria-labelledby` attributes on elements (linking to targets)
Option	`a11y.labelTargets:Boolean`	`false`	Inject `aria-labelledby` attributes on targets (linking to elements)
Option	`a11y.controls:Boolean`	`true`	Inject `aria-controls` attributes
Option	`a11y.selected:Boolean`	`false`	Inject `aria-selected` attributes
Option	`a11y.expanded:Boolean`	`true`	Inject `aria-expanded` attributes
Option	`a11y.live:Boolean`	`true`	Inject `aria-live` attributes on auto
Option	`a11y.disabled:Boolean`	`true`	Inject `aria-disabled` attributes on enable/disable
Option	`a11y.keyboard:Boolean`	`true`	Automatic keyboard next, previous and exit interactions
Option	`a11y.vertical:Boolean`	`false`	Vertical arrows instead of horizontal for keyboard events
Option	`a11y.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.

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

	Syntax	Default / Arguments	Description
Option	`disabled:Boolean`	`false`	Disable the component
Option	`disableDeactivate:Boolean`	`true`	Deactivate automatically on disable and destroy

With nested selectors change the elements and targets query.

Example of component disabled on desktop with match media.

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

	Syntax	Default / Arguments	Description
Option	`matches:Object`	`false`	Add 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-above to have the button above the backdrop.

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

	Syntax	Default / Arguments	Description
Option	`focusLimit:Boolean`	`true`	Automatically limit focus on activation inside current targets
Option	`focusTrap: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.

	Syntax	Default / Arguments	Description
Option	`zIndex:Object\|false`	`{ targets: { start: 400, factor: -1 } }`	Set `z-index` on activation, can be `elements`, `targets`, `elementsInner`, `targetsInner`

Resets to current automatically on deactivation.

	Syntax	Default / Arguments	Description
Option	`debug:Boolean`	`false`	Debug on console
Option	`visibleReinit:Boolean`	`false`	Reinit when `self.container` becomes visible with `display` only one time and only if not already visible