Styling

Class names follow BEM with the vlt- prefix (block vlt-layer-menu). The plugin stylesheet contains structure only, so the menu inherits your fonts and colors.

Class	Element
.vlt-layer-menu	The container
.vlt-layer-menu--clip	Container modifier when clip: true
.vlt-layer-menu__panel	Every level (<ul>)
.vlt-layer-menu__panel--root / --leaving	The root level / the level leaving during a transition
.vlt-layer-menu__item / __item--parent	Every <li> / an <li> with a submenu
.vlt-layer-menu__link	Every item link or button (including the back button)
.vlt-layer-menu__trigger	A link that opens a submenu
.vlt-layer-menu__arrow / __arrow--back	Chevrons (CSS borders, currentColor)
.vlt-layer-menu__back / __back-btn / __back-text	Back item
.vlt-layer-menu__title	Level title (showTitle)

All names are also available in JS as CLASSES (ESM/CJS export).

SCSS

The source dist/_layer-menu.scss exposes !default variables:

@use 'vlt-layer-menu/scss' with (
  $vlt-layer-menu-perspective: 800px,
  $vlt-layer-menu-arrow-size: 0.5em,
  $vlt-layer-menu-arrow-width: 1.5px,
);

Theme example

.site-menu {
  .vlt-layer-menu__link { padding: 16px 24px; font-size: 20px; }
  .vlt-layer-menu__back-btn { background: #15131f; color: #ffc900; }
}