Menu

<gstock-menu> | GstockMenu

Sizes

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

Cut Copy Paste Delete 
<gstock-menu style="max-width: 120px" size="small">
  <gstock-menu-item prefix="scissors" value="cut">Cut</gstock-menu-item>
  <gstock-menu-item prefix="copy" value="copy">Copy</gstock-menu-item>
  <gstock-menu-item prefix="clipboard" value="paste">Paste</gstock-menu-item>
  <gstock-menu-item prefix="trash-2" value="delete">Delete</gstock-menu-item>
</gstock-menu>

Cut Copy Paste Delete 
<gstock-menu style="max-width: 140px" size="medium">
  <gstock-menu-item prefix="scissors" value="cut">Cut</gstock-menu-item>
  <gstock-menu-item prefix="copy" value="copy">Copy</gstock-menu-item>
  <gstock-menu-item prefix="clipboard" value="paste">Paste</gstock-menu-item>
  <gstock-menu-item prefix="trash-2" value="delete">Delete</gstock-menu-item>
</gstock-menu>

Cut Copy Paste Delete 
<gstock-menu style="max-width: 160px" size="large">
  <gstock-menu-item prefix="scissors" value="cut">Cut</gstock-menu-item>
  <gstock-menu-item prefix="copy" value="copy">Copy</gstock-menu-item>
  <gstock-menu-item prefix="clipboard" value="paste">Paste</gstock-menu-item>
  <gstock-menu-item prefix="trash-2" value="delete">Delete</gstock-menu-item>
</gstock-menu>

Use submenu slot to create a submenu in any menu item.

Undo Redo Cut Copy Paste Find Find… Find Next Find Previous Transforms Uppercase Lowercase Capitalize 
<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>
    Transforms
    <gstock-menu slot="submenu">
      <gstock-menu-item value="uppercase">Uppercase</gstock-menu-item>
      <gstock-menu-item value="lowercase">Lowercase</gstock-menu-item>
      <gstock-menu-item value="capitalize">Capitalize</gstock-menu-item>
    </gstock-menu>
  </gstock-menu-item>
</gstock-menu>

Scrolling

By design, a navigation menu’s height will never exceed 100% of its container. As such, navigation menus will not scroll with the page.

Menu Item 1 Menu Item 2 Menu Item 3 Menu Item 4 Menu Item 5 Menu Item 6 Menu Item 7 Menu Item 8 Menu Item 9 Menu Item 10 
<div class="preview__canvas--box">
  <gstock-menu>
    <gstock-menu-item prefix="file-text">
      Menu Item 1
    </gstock-menu-item>
    <gstock-menu-item prefix="file-text">
      Menu Item 2
    </gstock-menu-item>
    <gstock-menu-item prefix="file-text">
      Menu Item 3
    </gstock-menu-item>
    <gstock-menu-item prefix="file-text">
      Menu Item 4
    </gstock-menu-item>
    <gstock-menu-item prefix="file-text">
      Menu Item 5
    </gstock-menu-item>
    <gstock-menu-item prefix="file-text">
      Menu Item 6
    </gstock-menu-item>
    <gstock-menu-item prefix="file-text">
      Menu Item 7
    </gstock-menu-item>
    <gstock-menu-item prefix="file-text">
      Menu Item 8
    </gstock-menu-item>
    <gstock-menu-item prefix="file-text">
      Menu Item 9
    </gstock-menu-item>
    <gstock-menu-item prefix="file-text">
      Menu Item 10
    </gstock-menu-item>
  </gstock-menu>
</div>