@finastra/menu

Menu

fds-menu component is mwc-menu with a different tag to homogenize with FDS library.

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.