Home Components Menu
Menu
Overview Playground API
Menus display a list of choices on temporary surfaces.
Usage
New Open Save Disabled Print (with value) 

  <goat-sidenav>
    <goat-sidenav-menu>
      <goat-sidenav-menu-item> New</goat-sidenav-menu-item>
      <goat-sidenav-menu-item> Open</goat-sidenav-menu-item>
      <goat-sidenav-menu-item> Save</goat-sidenav-menu-item>
      <goat-sidenav-menu-item disabled> Disabled</goat-sidenav-menu-item>
      <divider></divider>
      <goat-sidenav-menu-item value="print"> Print (with value)</goat-sidenav-menu-item>
    </goat-sidenav-menu>
  </goat-sidenav>
Icon Menu
Cut ⌘X Copy ⌘C Paste ⌘X Delete ←
Shivaji Varma
Software Engineer
John doe
Manager
Fred
Director 

  <goat-menu class="menu" style="width: 200px">
    <goat-menu-item value="cut">
      <goat-icon name="scissors" slot="start" size="sm"></goat-icon>
      Cut
      <span slot="end">⌘X</span>
    </goat-menu-item>
    <goat-menu-item value="copy">
      <goat-icon name="files" slot="start" size="sm"></goat-icon>
      Copy
      <span slot="end">⌘C</span>
    </goat-menu-item>
    <goat-menu-item value="paste">
      <goat-icon name="clipboard" slot="start" size="sm"></goat-icon>
      Paste
      <span slot="end">⌘X</span>
    </goat-menu-item>
    <goat-divider></goat-divider>
    <goat-menu-item value="delete">
      <goat-icon name="trash" slot="start" size="sm"></goat-icon>
      Delete
      <span slot="end">←</span>
    </goat-menu-item>
  </goat-menu>

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

    <goat-menu-item value="fred">
      <goat-avatar src="https://doodleipsum.com/40x40/avatar-3?i=5ff278e220eacb10b8e37efefef406a6" size="40px" slot="start"></goat-avatar>
      <div>
        <div>
          <goat-text size="md">Fred</goat-text>
        </div>
        <div>
          <goat-text size="sm" variant="secondary">Director</goat-text>
        </div>
      </div>
    </goat-menu-item>
  </goat-menu>
Events 
 const $list = document.querySelector('.menu');
      $list.addEventListener('goat-menu-item-click',
      function(evt) {
        console.log('
' + JSON.stringify(evt.detail.value, null, 4) + '
');
      });
Usage Icon Menu Events
Work in progress
Properties
Events
Methods
CSS Custom Properties
Previous Next