material-fab-menu

MD3 Expressive FAB menu — opens 2–6 related actions above the FAB. Close button morphs to 56 dp pill; menu items use a contrasting tone.

Each demo cell reserves enough headroom so that the popover items can be seen above the FAB. In a real app the FAB sits at the lower-trailing corner of the screen and the menu opens upward.

primary · medium
secondary · small
tertiary · large
activate event 
(no selection)
Sample usage 
<!-- default: medium FAB, primary color set -->
<material-fab-menu icon="add" aria-label="Compose">
  <material-fab-menu-item icon="mail"  label="Email"></material-fab-menu-item>
  <material-fab-menu-item icon="chat"  label="Message"></material-fab-menu-item>
  <material-fab-menu-item icon="event" label="Meeting"></material-fab-menu-item>
</material-fab-menu>

<!-- secondary color set, small FAB -->
<material-fab-menu color-set="secondary" size="small" icon="share">
  <material-fab-menu-item icon="link" label="Copy link"></material-fab-menu-item>
  <material-fab-menu-item icon="mail" label="Send email"></material-fab-menu-item>
</material-fab-menu>

<!-- listen for selection (auto-closes the menu) -->
<script>
  document.querySelector('material-fab-menu')
    .addEventListener('materialFabMenuItemActivate', e => console.log(e.detail.value));
</script>