Navigation Drawer Menu

<gstock-navigation-drawer-menu> | GstockNavigationDrawerMenu

Header

Use the label and icon attributes to set the label and icon of the menu.

Orders Order list Create new order Invoices Invoice list Create new invoice 
<gstock-navigation-drawer-menu icon="layers" label="Process">
  <gstock-navigation-drawer-menu-item icon="shopping-cart">
    Orders
    <gstock-navigation-drawer-menu-item>Order list</gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item>Create new order</gstock-navigation-drawer-menu-item>
  </gstock-navigation-drawer-menu-item>
  <gstock-navigation-drawer-menu-item icon="file-text">
    Invoices
    <gstock-navigation-drawer-menu-item>Invoice list</gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item>Create new invoice</gstock-navigation-drawer-menu-item>
  </gstock-navigation-drawer-menu-item>
</gstock-navigation-drawer-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 Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 2 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 3 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 4 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 5 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 6 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 7 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 8 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 9 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 10 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 11 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 12 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 13 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 14 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 15 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 Menu Item 16 Menu Subitem 1 Menu Subitem 2 Menu Subitem 3 
<div class="preview__canvas--box">
  <gstock-navigation-drawer-menu>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 1
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 2
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 3
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 4
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 5
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 6
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 7
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 8
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 9
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 10
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 11
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 12
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 13
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 14
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 15
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
    <gstock-navigation-drawer-menu-item icon="file-text">
      Menu Item 16
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 1
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 2
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item>
        Menu Subitem 3
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu-item>
  </gstock-navigation-drawer-menu>
</div>