Layer Menu — Animated Multi-Level JavaScript Navigation

Multi-Level Navigation. Smooth, Layered Transitions.

Give your website navigation a modern, app-like feel.

Layer Menu is a lightweight JavaScript plugin that transforms nested menus into smooth, layered navigation experiences. Each submenu slides in as a new level, creating an intuitive browsing experience with fluid transitions and effortless navigation back.

Perfect for creative websites, portfolios, agencies, and modern web projects.

No jQuery. No icon fonts. No unnecessary dependencies.

✨ Key Features

Layered Multi-Level Navigation

Turn a nested HTML list into a drill-down menu that supports any number of submenu levels. Each level feels like a new screen, keeping navigation organized and easy to follow.

12 Built-In Transitions + Custom Animations

Choose from a collection of built-in animations, including slide and other modern effects. Create your own transitions using custom Web Animations API keyframes.

Smooth Height Transitions

The menu container automatically adjusts its height as visitors move between short and long submenu levels, keeping the experience fluid and polished.

Lightweight & Dependency-Free

Built with plain JavaScript, Layer Menu requires no jQuery or icon fonts. The minified, gzipped script is approximately 4 KB.

Accessible Navigation

Designed with accessibility in mind:

• Keyboard navigation with arrow keys
• Home and End key support
• Escape key handling
• Focus management
• Reduced-motion preferences
• ARIA support

Smart Active-Page Navigation

Automatically opens the menu level containing the current page, using aria-current="page" or .current-menu-item.

Flexible Styling

Customize the menu to match your website’s design. The plugin includes CSS and SCSS source files, configurable SCSS variables, and BEM-style class names using the vlt- prefix.

Simple Integration

Use standard nested HTML markup and initialize the plugin with JavaScript or supported data attributes. No special framework is required.

Perfect For

• Creative agency websites
• Personal and professional portfolios
• Designer and photographer websites
• E-commerce navigation
• Mobile-friendly website menus
• Multi-level navigation systems
• Interactive website interfaces
• Custom HTML and WordPress projects

Whether you’re building a minimalist portfolio or a sophisticated website with multiple navigation levels, Layer Menu helps you create a clean, engaging browsing experience.

What’s Included

• Layer Menu JavaScript plugin
• CSS stylesheet
• SCSS source files
• TypeScript definitions

⚙️ Compatibility

Tested for modern versions of:

• Chrome
• Firefox
• Safari
• Microsoft Edge

Layer Menu works with standard HTML markup and can be integrated into WordPress or other CMS platforms.

Documentation

Get started with the installation guide, configuration options, animation examples, styling instructions, methods, and events.

Documentation: https://vlthemes.me/docs/layer-menu/

Upgrade Your Website Navigation

Make every submenu feel like a natural continuation of the browsing experience.

Get Layer Menu today and build smooth, modern navigation with minimal code.

Get Layer Menu now.