Menu JS

Usage

The Menu component and its children MenuBtn and MenuList can be used to create accessible menu with opening on click or on hover.

app.js

import { Base, createApp } from '@studiometa/js-toolkit';
import { Menu } from '@studiometa/ui';

class App extends Base {
  static config = {
    name: 'App',
    components: {
      Menu,
    },
  };
}

export default createApp(App);

index.html

<nav data-component="Menu" data-option-mode="click">
  <button type="button" data-component="MenuBtn">Toggle menu</button>
  <ul
    data-component="MenuList"
    data-option-enter-from="hidden"
    data-option-leave-to="hidden"
    class="hidden">
    <li>...</li>
    <li>...</li>
  </ul>
</nav>

HTML Structure

A Menu component should only have one direct MenuList child and one direct MenuBtn child. In case of advanced menus, the Menu components can be nested inside one another.

Example of a nested Menu tree

┌ Menu
├─ MenuBtn
├─ MenuList
├───┬ Menu
│   ├─ MenuBtn
│   └─ MenuList
└───┬ Menu
    ├─ MenuBtn
    └─ MenuList
    …