Navigation Menu Item

<gstock-navigation-menu-item> | GstockNavigationMenuItem

Nested items

A menu item can contain other items. This allows the node to be expanded or collapsed by the user.

Menu Item Menu Item Menu Subitem Menu Subitem Menu Subitem Menu Item Menu Subitem Menu Subitem Menu Item Menu Item Menu Subitem Menu Subitem Menu Item Menu Subitem Menu Subitem Menu Subitem Menu Subitem 
<gstock-navigation-menu>
  <gstock-navigation-menu-item icon="mail">
    Menu Item
    <gstock-navigation-menu-item icon="phone">
      Menu Item
      <gstock-navigation-menu-item>Menu Subitem</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Menu Subitem</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Menu Subitem</gstock-navigation-menu-item>
    </gstock-navigation-menu-item>
    <gstock-navigation-menu-item icon="message-square">
      Menu Item
      <gstock-navigation-menu-item>Menu Subitem</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Menu Subitem</gstock-navigation-menu-item>
    </gstock-navigation-menu-item>
  </gstock-navigation-menu-item>
  <gstock-navigation-menu-item icon="shopping-bag">
    Menu Item
    <gstock-navigation-menu-item icon="shopping-cart">
      Menu Item
      <gstock-navigation-menu-item>Menu Subitem</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Menu Subitem</gstock-navigation-menu-item>
    </gstock-navigation-menu-item>
    <gstock-navigation-menu-item icon="file-text">
      Menu Item
      <gstock-navigation-menu-item>Menu Subitem</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Menu Subitem</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Menu Subitem</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Menu Subitem</gstock-navigation-menu-item>
    </gstock-navigation-menu-item>
  </gstock-navigation-menu-item>
</gstock-navigation-menu>

Selected

Use the selected attribute to select a navigation menu item initially.

Menu Item 1 Menu Item A Menu Item B Menu Item C Menu Item 2 Menu Item 3 
<gstock-navigation-menu>
  <gstock-navigation-menu-item>
    Menu Item 1
    <gstock-navigation-menu-item>Menu Item A</gstock-navigation-menu-item>
    <gstock-navigation-menu-item>Menu Item B</gstock-navigation-menu-item>
    <gstock-navigation-menu-item>Menu Item C</gstock-navigation-menu-item>
  </gstock-navigation-menu-item>
  <gstock-navigation-menu-item selected>Menu Item 2</gstock-navigation-menu-item>
  <gstock-navigation-menu-item>Menu Item 3</gstock-navigation-menu-item>
</gstock-navigation-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-navigation-menu>
  <gstock-navigation-menu-item>Menu Item 1</gstock-navigation-menu-item>
  <gstock-navigation-menu-item disabled>Menu Item 2</gstock-navigation-menu-item>
  <gstock-navigation-menu-item>Menu Item 3</gstock-navigation-menu-item>
</gstock-navigation-menu>

Expanded

Use the expanded attribute to expand a navigation menu item initially.

Menu Item 1 Menu Item 2 (expanded) Menu Item A (expanded) Menu Item Z Menu Item Y Menu Item X Menu Item B Menu Item C Menu Item 3 
<gstock-navigation-menu>
  <gstock-navigation-menu-item>Menu Item 1</gstock-navigation-menu-item>
  <gstock-navigation-menu-item expanded>
    Menu Item 2 (expanded)
    <gstock-navigation-menu-item expanded>
      Menu Item A (expanded)
      <gstock-navigation-menu-item>Menu Item Z</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Menu Item Y</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Menu Item X</gstock-navigation-menu-item>
    </gstock-navigation-menu-item>
    <gstock-navigation-menu-item>Menu Item B</gstock-navigation-menu-item>
    <gstock-navigation-menu-item>Menu Item C</gstock-navigation-menu-item>
  </gstock-navigation-menu-item>
  <gstock-navigation-menu-item>Menu Item 3</gstock-navigation-menu-item>
</gstock-navigation-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-navigation-menu>
  <gstock-navigation-menu-item icon="link" href="https://example.com/">
    Link
  </gstock-navigation-menu-item>
  <gstock-navigation-menu-item icon="external-link" href="https://example.com/" target="_blank">
    New Window
  </gstock-navigation-menu-item>
  <gstock-navigation-menu-item icon="download" href="/assets/images/wordmark.svg" download="gstock.svg">
    Download
  </gstock-navigation-menu-item>
  <gstock-navigation-menu-item icon="x-circle" href="https://example.com/" disabled>
    Disabled
  </gstock-navigation-menu-item>
</gstock-navigation-menu>