
  <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>

Slots


    <wc-menu class="menu" preview="true">
      <wc-menu-item value="cut">
        <wc-icon name="cut" slot="start" size="sm"></wc-icon>
        Cut
        <span slot="end">⌘X</span>
      </wc-menu-item>
      <wc-menu-item value="copy">
        <wc-icon name="copy" slot="start" size="sm"></wc-icon>
        Copy
        <span slot="end">⌘C</span>
      </wc-menu-item>
      <wc-menu-item value="paste">
        <wc-icon name="paste" slot="start" size="sm"></wc-icon>
        Paste
        <span slot="end">⌘X</span>
      </wc-menu-item>
      <wc-divider></wc-divider>
      <wc-menu-item value="delete">
        <wc-icon name="trash-can" slot="start" size="sm"></wc-icon>
        Delete
        <span slot="end">←</span>
      </wc-menu-item>
    </wc-menu>


  <wc-menu class="menu" preview="true" style="width: 300px">
    <wc-menu-item value="shivaji" selected="true">
      <pc-avatar src="https://doodleipsum.com/40x40/avatar-3?i=74943b7fc5a9da2affe8c2d8b8558812" size="40px" slot="start"></pc-avatar>
      <div slot="headline">Shivaji Varma</div>
      <div slot="supporting-text">Software Engineer</div>
    </wc-menu-item>
    <wc-menu-item value="john">
      <pc-avatar src="https://doodleipsum.com/40x40/avatar-3?i=6801be2ffb4809eefe713e4fefd7b9ae" size="40px" slot="start"></pc-avatar>
      <div slot="headline">John doe</div>
      <div slot="supporting-text">Manager</div>
    </wc-menu-item>

    <wc-menu-item value="fred">
      <pc-avatar src="https://doodleipsum.com/40x40/avatar-3?i=5ff278e220eacb10b8e37efefef406a6" size="40px" slot="start"></pc-avatar>
      <div slot="headline">Fred</div>
      <div slot="supporting-text">Director</div>
    </wc-menu-item>
  </wc-menu>

Events

 const $list = document.querySelector('.menu');
      $list.addEventListener('pc-menu-item--click',
      function(evt) {
       console.log('<pre>' + JSON.stringify(evt.detail.value, null, 4) + '</pre>');
      });

Menu

Usage

Slots

Events

Menu