Menu Item

<gstock-menu-item> | GstockMenuItem

Menus are organizational tools that enhance the readability and organization of content.

Menu Item 
<gstock-menu style="max-width: 180px">
  <gstock-menu-item>Menu Item</gstock-menu-item>
</gstock-menu>

Sizes

Use the size attribute to change the size of the menu item.

Small 1 Small 2 Small 3 
<gstock-menu size="small" style="max-width: 180px">
  <gstock-menu-item size="small" prefix="mail">Small 1</gstock-menu-item>
  <gstock-menu-item size="small" prefix="phone">Small 2</gstock-menu-item>
  <gstock-menu-item size="small" prefix="message-square">Small 3</gstock-menu-item>
</gstock-menu>

Medium 1 Medium 2 Medium 3 
<gstock-menu size="medium" style="max-width: 180px">
  <gstock-menu-item size="medium" prefix="mail">Medium 1</gstock-menu-item>
  <gstock-menu-item size="medium" prefix="phone">Medium 2</gstock-menu-item>
  <gstock-menu-item size="medium" prefix="message-square">Medium 3</gstock-menu-item>
</gstock-menu>

Large 1 Large 2 Large 3 
<gstock-menu size="large" style="max-width: 180px">
  <gstock-menu-item size="large" prefix="mail">Large 1</gstock-menu-item>
  <gstock-menu-item size="large" prefix="phone">Large 2</gstock-menu-item>
  <gstock-menu-item size="large" prefix="message-square">Large 3</gstock-menu-item>
</gstock-menu>

Disabled

Use the disabled attribute to disable the menu item so it cannot be selected.

Menu Item 1 Menu Item 2 Menu Item 3 
<gstock-menu style="max-width: 180px">
  <gstock-menu-item>Menu Item 1</gstock-menu-item>
  <gstock-menu-item disabled>Menu Item 2</gstock-menu-item>
  <gstock-menu-item>Menu Item 3</gstock-menu-item>
</gstock-menu>

Prefix and suffix

Use the prefix and suffix attributes to add icons to the start and end of menu items.

Menu Item 1 Menu Item 2 Menu Item 3 
<gstock-menu style="max-width: 260px">
  <gstock-menu-item prefix="mail"> Menu Item 1 </gstock-menu-item>
  <gstock-menu-item prefix="phone"> Menu Item 2 </gstock-menu-item>
  <gstock-menu-item prefix="message-square">
    Menu Item 3
  </gstock-menu-item>
</gstock-menu>

Menu Item 1 Menu Item 2 Menu Item 3 
<gstock-menu style="max-width: 260px">
  <gstock-menu-item suffix="mail"> Menu Item 1 </gstock-menu-item>
  <gstock-menu-item suffix="phone"> Menu Item 2 </gstock-menu-item>
  <gstock-menu-item suffix="message-square">
    Menu Item 3
  </gstock-menu-item>
</gstock-menu>

Use the prefix and suffix slots to add content to the start and end of menu items.

Menu Item 1 Secondary text 0 Menu Item 2 Secondary text 6 Menu Item 3 Secondary text 12 
<gstock-menu style="max-width: 260px">
  <gstock-menu-item>
    <gstock-avatar
      slot="prefix"
      image="https://i.pravatar.cc/64?img=8"
      label="Avatar"
      size="small"></gstock-avatar>
    Menu Item 1
    <span slot="help-text">Secondary text</span>
    <gstock-badge slot="suffix" color="danger" pill>0</gstock-badge>
  </gstock-menu-item>
  <gstock-menu-item>
    <gstock-avatar
      slot="prefix"
      image="https://i.pravatar.cc/64?img=12"
      label="Avatar"
      size="small"></gstock-avatar>
    Menu Item 2
    <span slot="help-text">Secondary text</span>
    <gstock-badge slot="suffix" color="warning" pill>6</gstock-badge>
  </gstock-menu-item>
  <gstock-menu-item>
    <gstock-avatar
      slot="prefix"
      image="https://i.pravatar.cc/64?img=38"
      label="Avatar"
      size="small"></gstock-avatar>
    Menu Item 3
    <span slot="help-text">Secondary text</span>
    <gstock-badge slot="suffix" color="primary" pill>12</gstock-badge>
  </gstock-menu-item>
</gstock-menu>

Checkbox menu items

Use the type attribute to checkbox to create a menu item that will toggle on and off when selected.

Checkbox 1 Checkbox 2 Checkbox 3 
<gstock-menu style="max-width: 180px">
  <gstock-menu-item type="checkbox">Checkbox 1</gstock-menu-item>
  <gstock-menu-item type="checkbox" checked>Checkbox 2</gstock-menu-item>
  <gstock-menu-item type="checkbox">Checkbox 3</gstock-menu-item>
</gstock-menu>

Use the href attribute to make the component render an <a> under the hood. This gives you all the default link behavior the browser provides and exposes the target and download attributes.

Link New Window Download Disabled 
<gstock-menu style="max-width: 180px">
  <gstock-menu-item prefix="link" href="https://example.com/">
    Link
  </gstock-menu-item>
  <gstock-menu-item prefix="external-link" href="https://example.com/" target="_blank">
    New Window
  </gstock-menu-item>
  <gstock-menu-item prefix="download" href="/assets/images/wordmark.svg" download="gstock.svg">
    Download
  </gstock-menu-item>
  <gstock-menu-item prefix="x-circle" href="https://example.com/" disabled>
    Disabled
  </gstock-menu-item>
</gstock-menu>

Value and selection

Use the value attribute to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the gstock-select-event event will be emitted and a reference to the item will be available at event.detail.item. You can use this reference to access the selected item’s value, its checked state, and more.

Menu Item 1 Menu Item 2 Menu Item 3 Checkbox 1 Checkbox 2 Checkbox 3 
<gstock-menu class="menu-value" style="max-width: 180px">
  <gstock-menu-item value="opt-1">Menu Item 1</gstock-menu-item>
  <gstock-menu-item value="opt-2">Menu Item 2</gstock-menu-item>
  <gstock-menu-item value="opt-3">Menu Item 3</gstock-menu-item>
  <gstock-divider></gstock-divider>
  <gstock-menu-item type="checkbox" value="opt-4">Checkbox 1</gstock-menu-item>
  <gstock-menu-item type="checkbox" value="opt-5">Checkbox 2</gstock-menu-item>
  <gstock-menu-item type="checkbox" value="opt-6">Checkbox 3</gstock-menu-item>
</gstock-menu>

<script type="module">
  const menu = document.querySelector('.menu-value');

  menu.addEventListener('gstock-select-event', event => {
    const item = event.detail.item;

    // Log value
    if (item.type === 'checkbox') {
      console.log(`Selected value: ${item.value} (${item.checked ? 'checked' : 'unchecked'})`);
    } else {
      console.log(`Selected value: ${item.value}`);
    }
  });
</script>