← Back to Documentation

Documentation

Component: Adaptive Menu (Burger) Mobile navigation with scroll lock

The Adaptive Menu component handles mobile navigation using a classic “burger” button. It reacts to user clicks, toggles global state on the <html> tag, and safely locks page scrolling while the menu is open.

Download Animmaster Vite Template Save your time — start now

How the adaptive menu works

The menu listens for clicks on a button marked with the attribute data-anim-menu. When the button is clicked:

  • The attribute data-anim-menu-open is added to the <html> tag.
  • Page scrolling is locked to prevent background scrolling.
  • The burger icon animates into its “open” state.

When the button is clicked again, all actions are reversed: the attribute is removed, scrolling is unlocked, and the menu closes.

Automatic behavior
You don’t need to write any JavaScript manually — the component connects itself as soon as the required attribute is present in HTML.

Usage

You can create the menu structure manually or use the ready-made component markup. The only strict requirement is that the menu button must have data-anim-menu.

Menu HTML structure

<div class="menu">
	<button
		type="button"
		data-anim-menu
		class="menu__icon icon-menu"
	>
		<span></span>
	</button>

	<nav class="menu__body">
		<ul class="menu__list">
			<li class="menu__item">
				<a href="#" class="menu__link">Home</a>
			</li>
			...
		</ul>
	</nav>
</div>
Important
The button that opens the menu must contain the data-anim-menu attribute — without it, the component will not activate.

Using the built-in component

If you don’t want to write the markup manually, you can include the ready-made menu HTML directly from the component folder.

Include example
<include src="@components/layout/menu/menu.html"></include>

This file already contains valid HTML structure and base classes. You can extend or override styles as needed in your project.

Styles and animation

The component ships with base styles for:

  • Burger icon layout (.icon-menu)
  • Open / close animation
  • Menu body visibility and transitions

All HTML and base SCSS files are located in: src/components/layout/menu/

Tip
You can safely customize animations and layout styles, but keep the core class names and data attributes intact for correct JS behavior.

Download

Use a production-ready adaptive menu with built-in scroll lock and smooth animations. Download the template and save hours of setup time.

Download Animmaster Vite Template Save your time — start now