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 |