Horizontal menu

Web component to create a responsive horizontal menu. In narrow screens, the items that don't fit in the menu are moved to a dropdown list.

• No dependencies
• Very light
• Follow the progressive enhancement strategy. If the JavaScript fails, the links are still visible.
• No styles or themes are provided with this package. Just the basic styles.
• Build with modern javascript, using ES6 modules and custom elements

Usage

Import and register the component with the desired tag name:

import Menu from "horizontal-menu/horizontal-menu.js";

customElements.define("oom-menu", Menu);

Create the menu with the following HTML code:

<oom-menu>
  <a href="#1">Link 1</a>
  <a href="#2">Link 2</a>
  <a href="#3">Link 3</a>
  <a href="#4">Link 4</a>
  <a href="#5">Link 5</a>
</oom-menu>

Use CSS to customize your menu. This web component uses a shadow dom and parts to customize the internal elements.

my-menu {
  /* Generic styles */
  display: flex;

  a {
    white-space: nowrap;
  }

  &::part(menu) {
    /* Main container */
  }
  &::part(links) {
    /* Horizontal links */
  }
  &::part(dropdown) {
    /* Dropdown container */
  }
  &::part(dropdown-button) {
    /* Button to show/hide the dropdown */
  }
  &::part(dropdown-links) {
    /* Dropdown links */
  }
}

The HTML structure of the shadow DOM is:

<div part="menu">
  <div part="links">
    <!-- Horizontal links -->
  </div>
  <div part="dropdown">
    <button part="dropdown-button">
      <!-- Button to show/hide the hidden links -->
    </button>
    <div part="dropdown-links">
      <!-- Hidden links -->
    </div>
  </div>
</div>