Dropdown

<gstock-dropdown> | GstockDropdown

Getting the Selected Item

When dropdowns are used with menus, you can listen for the gstock-select-event event to determine which menu item was selected. The menu item element will be exposed in event.detail.item. You can set value props to make it easier to identify commands.

<div class="dropdown-selection">
  <gstock-dropdown>
    <gstock-button caret slot="trigger">Edit</gstock-button>
    <gstock-menu>
      <gstock-menu-item value="cut">Cut</gstock-menu-item>
      <gstock-menu-item value="copy">Copy</gstock-menu-item>
      <gstock-menu-item value="paste">Paste</gstock-menu-item>
    </gstock-menu>
  </gstock-dropdown>
</div>

<script type="module">
  const container = document.querySelector('.dropdown-selection');
  const dropdown = container.querySelector('gstock-dropdown');

  dropdown.addEventListener('gstock-select-event', event => {
    const selectedItem = event.detail.item;
    console.log(selectedItem.value);
  });
</script>

Alternatively, you can listen for the click event on individual menu items. Note that, using this approach, disabled menu items will still emit a click event.

<div class="dropdown-selection-alt">
  <gstock-dropdown>
    <gstock-button caret slot="trigger">Edit</gstock-button>
    <gstock-menu>
      <gstock-menu-item value="cut">Cut</gstock-menu-item>
      <gstock-menu-item value="copy">Copy</gstock-menu-item>
      <gstock-menu-item value="paste">Paste</gstock-menu-item>
    </gstock-menu>
  </gstock-dropdown>
</div>

<script type="module">
  const container = document.querySelector('.dropdown-selection-alt');
  const cut = container.querySelector('gstock-menu-item[value="cut"]');
  const copy = container.querySelector('gstock-menu-item[value="copy"]');
  const paste = container.querySelector('gstock-menu-item[value="paste"]');

  cut.addEventListener('click', () => console.log('cut'));
  copy.addEventListener('click', () => console.log('copy'));
  paste.addEventListener('click', () => console.log('paste'));
</script>

Placement

The preferred placement of the dropdown can be set with the placement attribute. Note that the actual position may vary to ensure the panel remains in the viewport.

Edit

Cut

Copy

Paste

Find

Replace

<gstock-dropdown placement="top-start">
  <gstock-button caret slot="trigger">Edit</gstock-button>
  <gstock-menu>
    <gstock-menu-item>Cut</gstock-menu-item>
    <gstock-menu-item>Copy</gstock-menu-item>
    <gstock-menu-item>Paste</gstock-menu-item>
    <gstock-divider></gstock-divider>
    <gstock-menu-item>Find</gstock-menu-item>
    <gstock-menu-item>Replace</gstock-menu-item>
  </gstock-menu>
</gstock-dropdown>

Distance

The distance from the panel to the trigger can be customized using the distance attribute. This value is specified in pixels.

Edit

Cut

Copy

Paste

Find

Replace

<gstock-dropdown distance="30">
  <gstock-button caret slot="trigger">Edit</gstock-button>
  <gstock-menu>
    <gstock-menu-item>Cut</gstock-menu-item>
    <gstock-menu-item>Copy</gstock-menu-item>
    <gstock-menu-item>Paste</gstock-menu-item>
    <gstock-divider></gstock-divider>
    <gstock-menu-item>Find</gstock-menu-item>
    <gstock-menu-item>Replace</gstock-menu-item>
  </gstock-menu>
</gstock-dropdown>

Skidding

The offset of the panel along the trigger can be customized using the skidding attribute. This value is specified in pixels.

Edit

Cut

Copy

Paste

Find

Replace

<gstock-dropdown skidding="30">
  <gstock-button caret slot="trigger">Edit</gstock-button>
  <gstock-menu>
    <gstock-menu-item>Cut</gstock-menu-item>
    <gstock-menu-item>Copy</gstock-menu-item>
    <gstock-menu-item>Paste</gstock-menu-item>
    <gstock-divider></gstock-divider>
    <gstock-menu-item>Find</gstock-menu-item>
    <gstock-menu-item>Replace</gstock-menu-item>
  </gstock-menu>
</gstock-dropdown>

Submenus

To create a submenu, nest an <gstock-menu slot="submenu"> element in a menu item.

Edit

Undo

Redo

Cut

Copy

Paste

Find

Find…

Find Next

Find Previous

Transformations

Make uppercase

Make lowercase

Capitalize

<gstock-dropdown>
  <gstock-button caret slot="trigger">Edit</gstock-button>

  <gstock-menu style="max-width: 200px;">
    <gstock-menu-item value="undo">Undo</gstock-menu-item>
    <gstock-menu-item value="redo">Redo</gstock-menu-item>
    <gstock-divider></gstock-divider>
    <gstock-menu-item value="cut">Cut</gstock-menu-item>
    <gstock-menu-item value="copy">Copy</gstock-menu-item>
    <gstock-menu-item value="paste">Paste</gstock-menu-item>
    <gstock-divider></gstock-divider>
    <gstock-menu-item>
      Find
      <gstock-menu slot="submenu">
        <gstock-menu-item value="find">Find…</gstock-menu-item>
        <gstock-menu-item value="find-previous">Find Next</gstock-menu-item>
        <gstock-menu-item value="find-next">Find Previous</gstock-menu-item>
      </gstock-menu>
    </gstock-menu-item>
    <gstock-menu-item>
      Transformations
      <gstock-menu slot="submenu">
        <gstock-menu-item value="uppercase">Make uppercase</gstock-menu-item>
        <gstock-menu-item value="lowercase">Make lowercase</gstock-menu-item>
        <gstock-menu-item value="capitalize">Capitalize</gstock-menu-item>
      </gstock-menu>
    </gstock-menu-item>
  </gstock-menu>
</gstock-dropdown>

Hoisting

Dropdown panels will be clipped if they’re inside a container that has overflow: auto|hidden. The hoist attribute forces the panel to use a fixed positioning strategy, allowing it to break out of the container. In this case, the panel will be positioned relative to its containing block, which is usually the viewport unless an ancestor uses a transform, perspective, or filter. Refer to this page for more details.

<div class="dropdown-hoist">
  <gstock-dropdown>
    <gstock-button caret slot="trigger">No Hoist</gstock-button>
    <gstock-menu>
      <gstock-menu-item>Item 1</gstock-menu-item>
      <gstock-menu-item>Item 2</gstock-menu-item>
      <gstock-menu-item>Item 3</gstock-menu-item>
    </gstock-menu>
  </gstock-dropdown>

  <gstock-dropdown hoist>
    <gstock-button caret slot="trigger">Hoist</gstock-button>
    <gstock-menu>
      <gstock-menu-item>Item 1</gstock-menu-item>
      <gstock-menu-item>Item 2</gstock-menu-item>
      <gstock-menu-item>Item 3</gstock-menu-item>
    </gstock-menu>
  </gstock-dropdown>
</div>

<style>
  .dropdown-hoist {
    position: relative;
    border: solid 2px var(--gstock-legacy-color-grayscale-200);
    padding: var(--gstock-legacy-spacing-7);
    overflow: hidden;
  }
</style>