Loading...
Menu JS
Table of content
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 { 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);
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
…