@studiometa/ui

Appearance

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.

js
import { 
registerComponent
 } from '@studiometa/js-toolkit';
import { 
Menu
 } from '@studiometa/ui';


registerComponent
(
Menu
);
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
    …