1.0.3 • Published 3 years ago
Menus
Menus display a list of choices or options to the user.\
Requires the List module for correct appearance.
HTML
<button id="menu-anchor" class="mdf-button">Show menu</button>
<div class="mdf-menu">
<ul class="mdf-list" role="menu" aria-orientation="vertical" aria-hidden="true" tabindex="-1">
<li class="mdf-list__item" role="menuitem" tabindex="-1">Menu item</li>
<li class="mdf-list__item" role="menuitem" tabindex="-1">Menu item</li>
<li class="mdf-list__item" role="menuitem" tabindex="-1">Menu item</li>
</ul>
</div>
Sass
// Include default styles without configuration
@forward '@miraidesigns/menu/styles';
// Configure appearance
@use '@miraidesigns/menu' with (
$variable: value
);
@include menu.styles();
TypeScript
import { MDFMenu } from '@miraidesigns/menu';
new MDFMenu(document.querySelector('.mdf-menu'), {
anchor: document.getElementById('menu-anchor')
});
Implementation
Attributes
Please see the WAI-ARIA page for attributes and best practices regarding menus.
| Name | Element | Description |
|---|
data-menu-callback | <li> | Name of the callback has to match the name set in the script options |
Classes
| Name | Type | Description |
|---|
mdf-menu | Parent | Contains the menu list and its items |
mdf-menu--active | Modifier | Fades-in and moves menu on-screen |
mdf-menu__caption | Child | Caption to describe the menu |
Events
| Name | Data | Description |
|---|
MDFMenu:opened | null | Fires when the menu opens |
MDFMenu:activated | {callback: string, index: number, item: HTMLElement} | Fires whenever the a menu item is activated. Includes the callback name, the item itself and its index |
MDFMenu:closed | null | Fires when the menu closes |
Properties
| Name | Type | Description |
|---|
.anchor | HTMLElement | Returns the anchor element |
.items | HTMLElement[] | Returns an Array with all menu items |
.menu | HTMLElement | Returns the menu element |
.isActive() | (): boolean | Wether or not the menu is visible |
.openMenu(setFocus?) | (boolean): void | Open the menu (optionally set focus on the first item) |
.closeMenu(setFocus?) | (boolean): void | Close the menu (optionally set focus on the anchor) |
Options
| Name | Type | Default | Description |
|---|
anchor | Element | null | The anchor element that will call the menu |
posX | string | center | The menu's position on the X-axis. Values are left center right |
posY | string | bottom | The menu's position on the Y-axis. Values are top center bottom |
origin | string | top center | Origin of the menu transition. Same values as the transform-origin CSS property |
callbacks | Record<string, () => void> | {} | Object holding the menu item callbacks |
onOpen | () => void | null | Function will run when the menu is opened |
onClose | () => void | null | Function will run when the menu is closed |
hideOnClick | boolean | true | Close the menu when a click is registered outside of it |