Menu

  <wc-button id="menu-anchor" variant="filled">Open Menu</wc-button>

  <wc-menu id="usage-menu" anchor="menu-anchor" aria-label="Main actions menu">
    <wc-menu-item value="profile">
      <wc-icon name="home" slot="start"></wc-icon>
      Profile
    </wc-menu-item>
    <wc-menu-item value="account">Account Settings</wc-menu-item>
    <wc-menu-item value="notifications" selected="true">
      Notification Settings
    </wc-menu-item>
    <wc-divider></wc-divider>
    <wc-sub-menu>
      <wc-menu-item slot="item" value="appearance">
        Appearance
        <wc-icon name="arrow_right" slot="trailing-supporting-text"></wc-icon>
      </wc-menu-item>

      <wc-menu slot="menu" aria-label="Appearance settings">
        <wc-menu-item value="theme-light">Light</wc-menu-item>
        <wc-menu-item value="theme-dark">Dark</wc-menu-item>
        <wc-menu-item value="theme-system" selected="true">System</wc-menu-item>
      </wc-menu>
    </wc-sub-menu>
    <wc-menu-item disabled="true">Settings (Disabled)</wc-menu-item>
    <wc-menu-item value="logout">Logout</wc-menu-item>
  </wc-menu>

  <wc-button id="vibrant-menu-anchor" variant="tonal">Open Vibrant Menu</wc-button>

  <wc-menu id="vibrant-menu" anchor="vibrant-menu-anchor" variant="vibrant" aria-label="Vibrant style preview">
    <wc-menu-item value="profile">Profile</wc-menu-item>
    <wc-menu-item value="account">Account Settings</wc-menu-item>
    <wc-menu-item value="notifications" selected="true">
      Notification Settings
    </wc-menu-item>
    <wc-divider></wc-divider>
    <wc-menu-item disabled="true">Settings (Disabled)</wc-menu-item>
    <wc-menu-item value="logout">Logout</wc-menu-item>
  </wc-menu>

  <script>
    const wireMenu = ({
      menuId,
      anchorId,
    }) => {
      const menu = document.querySelector(`#${menuId}`);
      const anchor = document.querySelector(`#${anchorId}`);

      if (!menu || !anchor) {
        return;
      }

      const toggleMenu = event => {
        if (event.type === 'keydown' && event.key !== 'ArrowDown') {
          return;
        }

        menu.open = !menu.open;
        anchor.setAttribute('aria-expanded', String(menu.open));

        if (event.type === 'keydown') {
          event.preventDefault();
        }
      };
      anchor.addEventListener('click', toggleMenu);
      anchor.addEventListener('keydown', toggleMenu);

      menu.addEventListener('closed', () => {
        anchor.setAttribute('aria-expanded', 'false');
      });
    };

    wireMenu({ menuId: 'usage-menu', anchorId: 'menu-anchor' });
    wireMenu({ menuId: 'vibrant-menu', anchorId: 'vibrant-menu-anchor' });
  </script>