Skip to content

m3-fab-menu

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

m3-fab-menu

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
images
images
 
 
src
src
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 

README.md

@banegasn/m3-fab-menu

Preview

Material Design 3 FAB Menu web component — framework-agnostic, built with Lit.

npm version License: MIT

An expressive M3 FAB Menu (Floating Action Button Menu) web component — a modern replacement for the speed dial pattern. Features smooth open/close animations and a slotted menu item system. Works in Angular, React, Vue, Svelte, or plain HTML — no build step required.

Features

  • Expressive open/close animations
  • Slotted FAB trigger and menu items
  • Keyboard accessible (Escape to close)
  • Click-outside to dismiss
  • Framework-agnostic custom element

Installation

npm install @banegasn/m3-fab-menu
# or
pnpm add @banegasn/m3-fab-menu
# or
yarn add @banegasn/m3-fab-menu

CDN Usage (no build step)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>M3 FAB Menu Demo</title>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@banegasn/m3-fab-menu/+esm"></script>
  <style>
    body { font-family: Roboto, sans-serif; background: #fef7ff;  }
    .fab-container { position: fixed; bottom: 24px; right: 24px; }
  </style>
</head>
<body>
  <div class="fab-container">
    <m3-fab-menu>
      <m3-fab-menu-item label="New document">
        <svg slot="icon" viewBox="0 0 24 24" width="24" height="24">
          <path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
        </svg>
      </m3-fab-menu-item>
      <m3-fab-menu-item label="Upload file">
        <svg slot="icon" viewBox="0 0 24 24" width="24" height="24">
          <path fill="currentColor" d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
        </svg>
      </m3-fab-menu-item>
      <m3-fab-menu-item label="New folder">
        <svg slot="icon" viewBox="0 0 24 24" width="24" height="24">
          <path fill="currentColor" d="M20 6h-8l-2-2H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-1 8h-3v3h-2v-3h-3v-2h3V9h2v3h3v2z"/>
        </svg>
      </m3-fab-menu-item>
    </m3-fab-menu>
  </div>

  <script>
    document.querySelector('m3-fab-menu').addEventListener('fab-menu-item-click', (e) => {
      console.log('Selected:', e.detail.label);
    });
  </script>
</body>
</html>

npm Usage

import '@banegasn/m3-fab-menu';
<m3-fab-menu>
  <m3-fab-menu-item label="New document">
    <!-- icon slot -->
  </m3-fab-menu-item>
  <m3-fab-menu-item label="Upload">
    <!-- icon slot -->
  </m3-fab-menu-item>
</m3-fab-menu>

API

m3-fab-menu Properties

Property Type Default Description
open boolean false Whether the menu is open

m3-fab-menu Events

Event Detail Description
fab-menu-open {} Fired when the menu opens
fab-menu-close {} Fired when the menu closes
fab-menu-item-click { label: string } Fired when a menu item is clicked

m3-fab-menu-item Properties

Property Type Default Description
label string '' Item label text
disabled boolean false Disables the item

Slots

Slot Description
(default) m3-fab-menu-item elements
icon (on item) Icon for each menu item

CSS Custom Properties

Property Default Description
--md-sys-color-primary-container #eaddff FAB background color
--md-sys-color-on-primary-container #21005d FAB icon color
--md-sys-color-surface-container-high #ece6f0 Menu item background

Framework Usage

Angular

import '@banegasn/m3-fab-menu';
<m3-fab-menu (fab-menu-item-click)="onItemClick($event)">
  <m3-fab-menu-item label="New"></m3-fab-menu-item>
</m3-fab-menu>

React

import '@banegasn/m3-fab-menu';
// <m3-fab-menu onfab-menu-item-click={handleClick}>...</m3-fab-menu>

Vue

<m3-fab-menu @fab-menu-item-click="handleClick">
  <m3-fab-menu-item label="New" />
</m3-fab-menu>

Resources

License

MIT