The m3e-fab-menu component presents a dynamic menu of related actions, elegantly revealed from a floating action button (FAB). See FAB for more information on using floating action buttons.

npm i @m3e/fab-menu

This section outlines usage examples and configuration guidance for the components in this package.

The m3e-fab-menu is used in conjunction with a m3e-fab to create a menu opened when a FAB is activated.

• Use a m3e-fab-menu-trigger, nested inside a m3e-fab, to trigger a menu.
• Use the for attribute of the m3e-fab-menu-trigger to designate the menu to open.
• Nest 2-6 m3e-fab-menu-item components inside a m3e-fab-menu to designate menu items.

<m3e-fab variant="primary" size="large">
  <m3e-fab-menu-trigger for="fabmenu">
    <m3e-icon name="edit"></m3e-icon>
  </m3e-fab-menu-trigger>
</m3e-fab>
<m3e-fab-menu id="fabmenu" variant="primary">
  <m3e-fab-menu-item>
    <m3e-icon slot="icon" name="email" filled></m3e-icon>
    Email
  </m3e-fab-menu-item>
  <m3e-fab-menu-item>
    <m3e-icon slot="icon" name="chat" filled></m3e-icon>
    Message
  </m3e-fab-menu-item>
  <m3e-fab-menu-item>
    <m3e-icon slot="icon" name="folder" filled></m3e-icon>
    Folder
  </m3e-fab-menu-item>
</m3e-fab-menu>

The m3e-fab-menu supports three appearance variants: primary (default), secondary, and tertiary. Use the variant attribute to change the appearance.

<m3e-fab variant="secondary" size="large">
  <m3e-fab-menu-trigger for="fabmenu">
    <m3e-icon name="edit"></m3e-icon>
  </m3e-fab-menu-trigger>
</m3e-fab>
<m3e-fab-menu id="fabmenu" variant="secondary">
  <!-- Items omitted for brevity -->
</m3e-fab-menu>
<!-- Other variants omitted for brevity -->

Use the icon slot of a m3e-fab-menu-item to present an icon before an item's label. While not required, the following example uses the m3e-icon component from @m3e/icon to present icons using Material Symbols. See Icon for more information.

<m3e-fab-menu-item>
  <m3e-icon slot="icon" name="email" filled></m3e-icon>
  Email
</m3e-fab-menu-item>

You can disable a m3e-fab-menu-item using the disabled attribute. In addition, if the m3e-fab is disabled, the m3e-fab-menu will not be opened on click.

<m3e-fab-menu-item disabled>
  <m3e-icon slot="icon" name="email" filled></m3e-icon>
  Email
</m3e-fab-menu-item>

Menu items can also behave like links by specifying a URL using the href attribute. You can also specify target, rel and download similar to native anchor tags.

<m3e-fab-menu-item href="https://www.google.com" target="_blank">
  <m3e-icon slot="icon" name="open_in_new_window" filled></m3e-icon>
  Google
</m3e-fab-menu-item>

FAB menus are given ARIA role="menu" and items are given role="menuitem" indicating that the menu behaves like a contextual action list.

The aria-controls attribute of the m3e-fab is assigned the ID of the menu and aria-haspopup="menu" indicates that the FAB will open a menu. In addition, the FAB's aria-expanded attribute reflects the opened state of the menu.

When href is specified for an item, the ARIA role does not change and continues to be menuitem. In addition, the component presents an internal anchor, hidden from assistive technologies, used to invoke native browser features such a context menu options and tooltips.

This package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following.

<script type="module" src="/node_modules/@m3e/fab-menu/dist/index.js"></script>

You also need a module script for @m3e/fab due to being a dependency.

<script type="module" src="/node_modules/@m3e/fab/dist/index.js"></script>

In addition, you must use an import map to include additional dependencies.

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js",
      "@m3e/core/a11y": "/node_modules/@m3e/core/dist/a11y.js",
      "@m3e/core/anchoring": "/node_modules/@m3e/core/dist/anchoring.js",
      "@m3e/core/bidi": "/node_modules/@m3e/core/dist/bidi.js"
    }
  }
</script>

For production, use index.min.js, a11y.min.js, anchoring.min.js, and bidi.min.js for faster load times.

This package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.