Options

Updated Oct 6, 2026 1 min read 3 views

Option	Type	Default	Description
`animation`	`string \| { in, out }`	`'slide'`	Preset name or custom keyframes.
`duration`	`number \| '0.45s' \| '450ms'`	`450`	Transition length.
`easing`	`string`	`'cubic-bezier(0.65, 0, 0.35, 1)'`	Any CSS easing.
`backText`	`string \| (parent) => string`	`'Back'`	Back button text. `{parent}` becomes the label of the level you return to (`Menu` for the root).
`showTitle`	`boolean`	`false`	Show the level title under the back button.
`autoHeight`	`boolean`	`true`	Animate the menu height between levels.
`clip`	`boolean`	`true`	Clip transitions to the menu box (`overflow: hidden`).
`openActive`	`boolean`	`true`	On init, open the level that contains the current page link.
`activeSelector`	`string`	`'[aria-current="page"], .is-active, .current-menu-item > a'`	How the current page link is found.
`keyboard`	`boolean`	`true`	Keyboard navigation.
`reducedMotion`	`'auto' \| 'ignore'`	`'auto'`	`'auto'` switches levels instantly for users who prefer reduced motion.
`onInit`, `onChange`, `onComplete`, `onDestroy`	`function`	`null`	See Events.

Options can also come from attributes: data-layer-menu='{"duration": 300}' or data-lm-animation="cube", data-lm-show-title="true".

Was this article helpful?