@finastra/menu NPM

Usage

The full document can be found here

Import

npm i @finastra/menu
npm i @finastra/list;
npm i @finastra/button;

import '@finastra/menu';
import '@finastra/button';
import '@finastra/list';

...
<div style="position: relative;">
    <fds-button id="basicButton" raised label="Open Basic Menu"></fds-button>
    <fds-menu id="basicMenu">
        <fds-list-item>one</fds-list-item>
        <fds-list-item>two</fds-list-item>
        <fds-list-item disabled><div>four</div></fds-list-item>
        <li divider></li>
        <fds-list-item>five</fds-list-item>
    </fds-menu>
</div>

<script>
  const menu = document.getElementById('basicMenu');
  const button = document.getElementById('basicButton');

  // anchor must share a parent with menu that is `position: relative`
  menu.anchor = button;
  button.addEventListener('click', function() {
    menu.open = !menu.open;
  });
</script>

API

Properties

Property	Attribute	Modifiers	Type	Default	Description
`absolute`	`absolute`		`boolean`	false	Makes the menu's position absolute which will be relative to whichever ancestor has position:relative. Setting x and y will modify the menu's left and top. Setting anchor will attempt to position the menu to the anchor.
`activatable`	`activatable`		`boolean`	false	Proxies to mwc-list's activatable property.
`anchor`	`anchor`		`HTMLElement \\| null`	null	Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both mwc-menu and the anchor should share a parent with position:relative. Changing anchor typically requires absolute or fixed.
`corner`	`corner`		`"TOP_LEFT" \\| "TOP_RIGHT" \\| "BOTTOM_LEFT" \\| "BOTTOM_RIGHT" \\| "TOP_START" \\| "TOP_END" \\| "BOTTOM_START" \\| "BOTTOM_END"`	"TOP_START"	Corner of the anchor from which the menu should position itself.
`defaultFocus`	`defaultFocus`		`"NONE" \\| "LIST_ROOT" \\| "FIRST_ITEM" \\| "LAST_ITEM"`	"LIST_ROOT"	Item to focus upon menu open.
`fixed`	`fixed`		`boolean`	false	Makes the menu's position fixed which will be relative to the window. Setting x and y will modify the menu's left and top. Setting anchor will attempt to position the menu to the anchor's immediate position before opening.
`forceGroupSelection`	`forceGroupSelection`		`boolean`	false	Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.
`fullwidth`	`fullwidth`		`boolean`	false	Sets surface width to 100%.
`index`		readonly	`MWCListIndex`
`innerAriaLabel`	`innerAriaLabel`		`string \\| null`	null	Proxies to mwc-list's innerAriaLabel property.
`innerRole`	`innerRole`		`"menu" \\| "listbox"`	"menu"	Proxies to mwc-list's innerRole property.
`items`	`items`		`ListItemBase[]`	"[]"	Proxies to mwc-list's index property.
`mdcRoot`			`MenuSurface`		Root element for MDC Foundation usage.Define in your component with the `@query` decorator
`menuCorner`	`menuCorner`		`MenuCorner`	"START"	Horizontal corner of the menu from which the menu should position itself. NOTE: Only horizontal corners are supported.
`multi`	`multi`		`boolean`	false	Proxies to mwc-list's multi property.
`open`	`open`		`boolean`	false	Whether the menu should open and display.
`quick`	`quick`		`boolean`	false	Whether to skip the opening animation.
`selected`	`selected`		`ListItemBase \\| ListItemBase[] \\| null`	null	Proxies to mwc-list's selected property.
`slotElement`			`HTMLSlotElement \\| null`
`stayOpenOnBodyClick`	`stayOpenOnBodyClick`		`boolean`	false	Prevents the menu from closing when clicking outside the menu.
`styles`			`CSSResult[]`	"baseStyle","styles"
`wrapFocus`	`wrapFocus`		`boolean`	false	Proxies to mwc-list's wrapFocus property.
`x`	`x`		`number \\| null`	null	Sets horizontal position when absolute. When given an anchor, sets horizontal position relative to anchor at given corner. Requires y not to be null.
`y`	`y`		`number \\| null`	null	Sets vertical position when absolute. When given an anchor, sets vertical position relative to anchor at given corner. Requires x not to be null.

Methods

Method	Type
`click`	`(): void`
`close`	`(): void`
`focusItemAtIndex`	`(index: number): void`
`getFocusedItemIndex`	`(): number`
`layout`	`(updateItems?: boolean \\| undefined): void`
`select`	`(index: MWCListIndex): void`
`show`	`(): void`

Events

Event	Type
`action`	`ActionDetail`
`closed`
`items-updated`
`opened`
`selected`	`SelectedDetail`

CSS Custom Properties

Property	Default	Description
`--fds-menu-item-height`	"48px"	Height of single-line list-items in the menu.
`--fds-menu-max-height`	"calc(100vh - 32px)"	Menu max-height.
`--fds-menu-max-width`	"calc(100vw - 32px)"	Menu max-width.
`--fds-menu-min-width`	"112px"	Menu min-width.
`--fds-menu-z-index`	8	Z-index of the popup menu surface.