Drop Down Menu

A simple drop-down menu coded in vanilla JavaScript.

How It Works

This package generates the following HTML structure.

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link" href="www.example.com">Item 1</a>
  </li>
  <li class="menu__item">
    <a class="menu__link" href="www.example.com">Item 2</a>
  </li>
  <li class="menu__item">
    <a class="menu__link" href="www.example.com">Item 3</a>
    <ul class="menu menu--nested">
      <li class="menu__item">
        <a class="menu__link" href="www.example.com">Submenu Item 1</a>
      </li>
      <li class="menu__item">
        <a class="menu__link" href="www.example.com">Submenu Item 2</a>
      </li>
    </ul>
  </li>
</ul>

What's Included

This package contains following files:

• drop-down-menu.js
• drop-down-menu.css

How to Use

Installation

Install the package.

npm install @syntaxed/drop-down-menu

Import the package into your JavaScript file.

import DropDownMenu from '@syntaxed/drop-down-menu';

Add drop-down-menu.css to your web page.

<link rel="stylesheet" href="path/to/@syntaxed/drop-down-menu/dist/drop-down-menu.css">

Usage

Initialize the menu.

const menu = new DropDownMenu({
    menuItems: [
        { linkText: 'Item 1' }, 
        { linkText: 'Item 2' }, 
        { linkText: 'Item 3' },
    ],
});

Call the getMenu() method to return the generated menu.

menu.getMenu();

Append the generated menu to the DOM.

const app = document.querySelector('.app');

app.appendChild(menu.getMenu());

Options

Single-Level Menu

To create a menu item, specify the link text for the item.

const menu = new DropDownMenu({
    menuItems: [
        { linkText: 'Item 1' }, 
        { linkText: 'Item 2' }, 
        { linkText: 'Item 3' },
    ],
});

Muli-Level Menu

To add a submenu to an item, add the submenuItems property.

const menu = new DropDownMenu({
    menuItems: [
        { 
            linkText: 'Item 1', 
            submenuItems: [
                { linkText: 'Submenu Item 1' },
                { linkText: 'Submenu Item 2' },
                { linkText: 'Submenu Item 3' },
            ],
        }, 
    ],
});

Link Attributes

To specify menu item link attributes, add the linkAttributes property to the item.

const menu = new DropDownMenu({
    menuItems: [
        { 
            linkText: 'Item 1',
            linkAttributes: { href: 'www.example.com' },
            submenuItems: [
                {
                    linkText: 'Submenu Item 1',
                    linkAttributes: { href: 'www.example.com', target: '_blank' },
                },
                {
                    linkText: 'Submenu Item 2',
                    linkAttributes: { href: 'www.example.com' },
                },
            ],
        }, 
    ],
});