vanilla-menu

Simple javascript menu with zero dependencies

Usage no npm install needed!

<script type="module">
  import vanillaMenu from 'https://cdn.skypack.dev/vanilla-menu';
</script>

README

Vanilla menu

A simple and lightweight javascript menu without dependencies.

Demo

Install

npm i vanilla-menu

Example

<div id="menu" class="va-menu-container va-menu-container--default">
    <div class="va-menu__mobile">
        <div class="va-menu__mobile-content">
            Mobile header here
        </div>
        <a href="#" class="va-menu__mobile-button"></a>
    </div>
    <div class="va-menu__brand">
        LOGO HERE
    </div>
    <ul class="va-menu">
        <li class="va-menu__item">
            <a href="https://github.com/dimsog/vanilla-menu" class="va-menu__item-link">Home</a>
        </li>
        <li class="va-menu__item">
            <a href="#" class="va-menu__item-link">Dropdown</a>
            <ul class="va-submenu">
                <li class="va-submenu__item">
                    <a href="#" class="va-submenu__item-link">Menu item 1</a>
                </li>
                <li class="va-submenu__item">
                    <a href="#" class="va-submenu__item-link">Menu item 2</a>
                </li>
            </ul>
        </li>
        <li class="va-menu__item va-menu__item--megamenu">
            <a href="#" class="va-menu__item-link">Megamenu</a>
            <div class="va-menu__item--megamenu-content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Integer mattis ipsum eget leo auctor posuere. Suspendisse ac lacus ex.
                Fusce tempus pretium sapien nec malesuada.
                Sed velit velit, suscipit eu vestibulum et, euismod sit amet diam.
                Morbi dapibus consectetur commodo. Maecenas aliquam at felis sed cursus.
            </div>
        </li>
        <li class="va-menu__item va-menu__item--fixed va-menu__item--megamenu">
            <a href="#" class="va-menu__item-link">Megamenu fixed</a>
            <div class="va-menu__item--megamenu-content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Morbi fringilla magna a velit feugiat eleifend.
                Nullam vulputate vehicula suscipit.
            </div>
        </li>
        <li class="va-menu__item">
            <a href="#" class="va-menu__item-link">Submenu</a>
            <ul class="va-submenu">
                <li class="va-submenu__item">
                    <a href="#" class="va-submenu__item-link">
                        TV
                    </a>
                    <ul class="va-submenu">
                        <li class="va-submenu__item">
                            <a href="#" class="va-submenu__item-link">Brand 1</a>
                        </li>
                        <li class="va-submenu__item">
                            <a href="#" class="va-submenu__item-link">Brand 2</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="va-menu va-menu-more-container">
        <li class="va-menu__item">
            <a href="#" class="va-menu__item-link">...</a>
        </li>
    </ul>
    <div class="va-menu__static">
        <a href="#">
            <img src="images/shopping-cart.svg" class="icon img-fluid">
        </a>
    </div>
</div>

SCSS file

@import '~vanilla-menu/src/scss/vanilla-menu';

JavaScript

import VanillaMenu from 'vanilla-menu';

new VanillaMenu('#menu', {
    mobile: 768,
    clickable: false
});