Menu

import '@vollowx/seele/m3/menu/menu-item.js';
import '@vollowx/seele/m3/menu/menu.js';

File New Text File New File... Not so supporting texts Over it New Window Open File... Open Folder... Save Save As... 

<md-button id="someButton">File</md-button>
<md-menu id="someMenu" for="someButton" color="vibrant">
  <md-menu-item>New Text File</md-menu-item>
  <md-menu-item>
    New File...
    <span slot="supporting-text">Not so supporting texts</span>
  </md-menu-item>
  <md-menu-item>
    <span slot="overline">Over it</span>
    New Window
    <iconify-icon slot="end" icon="material-symbols:window"></iconify-icon>
  </md-menu-item>
  <md-divider inset></md-divider>
  <md-menu-item>Open File...</md-menu-item>
  <md-menu-item>Open Folder...</md-menu-item>
  <md-divider inset></md-divider>
  <md-menu-item selected>Save</md-menu-item>
  <md-menu-item>Save As...</md-menu-item>
</md-menu>

<script type="module">
someButton.addEventListener('click', () => {
  someMenu.open = !someMenu.open;
});
</script>

M3Menu

Properties

name description
color Reflected string; standard or vibrant; standard by default

M3MenuItem