Navigation

<gstock-navigation> | GstockNavigation

Orientation

Use orientation attribute to choose the orientation of the navigation, it can be horizontal or vertical.

Horizontal

Use the attribute orientation with value horizontal.

Dashboard Inbox Menu Item 1 Submenu Item Submenu Item Menu Item 2 Submenu Item Submenu Item Menu Item 3 Submenu Item Submenu Item Layers Menu Item 1 Submenu Item Submenu Item Menu Item 2 Submenu Item Submenu Item Menu Item 3 Submenu Item Submenu Item
Main Content
<div class="navigation-wrapper">
  <gstock-navigation orientation="horizontal">
  <gstock-navigation-item icon="home">Dashboard</gstock-navigation-item>
  <gstock-navigation-item icon="inbox">
    Inbox
    <gstock-navigation-menu slot="menu">
      <gstock-navigation-menu-item>
        Menu Item 1
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
      <gstock-navigation-menu-item>
        Menu Item 2
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
      <gstock-navigation-menu-item>
        Menu Item 3
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
    </gstock-navigation-menu>
  </gstock-navigation-item>
  <gstock-navigation-item icon="layers">
    Layers
    <gstock-navigation-menu slot="menu">
      <gstock-navigation-menu-item>
        Menu Item 1
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
      <gstock-navigation-menu-item>
        Menu Item 2
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
      <gstock-navigation-menu-item>
        Menu Item 3
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
    </gstock-navigation-menu>
  </gstock-navigation-item>
  </gstock-navigation>
  <div class="navigation-content">Main Content</div>
</div>

<style>
  .navigation-wrapper {
    height: 300px;
    width: 100%;
    border: solid 2px #c30a0a;
    overflow-y: auto;
  }

  .navigation-content {
    background-color: var(--gstock-legacy-color-grayscale-100);
    overflow-y: auto;
    padding: var(--gstock-legacy-spacing-7) var(--gstock-legacy-spacing-8);
    width: 100%;
    height: 100%;
  }
</style>

Vertical

Use the attribute orientation with value vertical.

Dashboard Inbox Menu Item 1 Submenu Item Submenu Item Menu Item 2 Submenu Item Submenu Item Menu Item 3 Submenu Item Submenu Item Layers Menu Item 1 Submenu Item Submenu Item Menu Item 2 Submenu Item Submenu Item Menu Item 3 Submenu Item Submenu Item
Main Content
<div class="navigation-wrapper">
  <gstock-navigation orientation="vertical">
  <gstock-navigation-item icon="home">Dashboard</gstock-navigation-item>
  <gstock-navigation-item icon="inbox">
    Inbox
    <gstock-navigation-menu slot="menu">
      <gstock-navigation-menu-item>
        Menu Item 1
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
      <gstock-navigation-menu-item>
        Menu Item 2
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
      <gstock-navigation-menu-item>
        Menu Item 3
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
    </gstock-navigation-menu>
  </gstock-navigation-item>
  <gstock-navigation-item icon="layers">
    Layers
    <gstock-navigation-menu slot="menu">
      <gstock-navigation-menu-item>
        Menu Item 1
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
      <gstock-navigation-menu-item>
        Menu Item 2
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
      <gstock-navigation-menu-item>
        Menu Item 3
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
    </gstock-navigation-menu>
  </gstock-navigation-item>
  </gstock-navigation>
  <div class="navigation-content">Main Content</div>
</div>

<style>
  .navigation-wrapper {
    height: 300px;
    width: 100%;
    border: solid 2px #c30a0a;
    overflow-y: auto;
    display: inline-flex;
  }

  .navigation-content {
   background-color: var(--gstock-legacy-color-grayscale-100);
    overflow-y: auto;
    padding: var(--gstock-legacy-spacing-7) var(--gstock-legacy-spacing-8);
    width: 100%;
    height: 100%;
  }
</style>

Drawer

Use the drawer.show() and drawer.hide() methods to toggle the state drawer.open that indicate if the drawer is opened o closed.

Dashboard Inbox Menu Item 1 Submenu Item Submenu Item Menu Item 2 Submenu Item Submenu Item Menu Item 3 Submenu Item Submenu Item Layers Menu Item 1 Submenu Item Submenu Item Menu Item 2 Submenu Item Submenu Item Menu Item 3 Submenu Item Submenu Item
Main Content
Show Drawer 
<div class="navigation-wrapper">
  <gstock-navigation orientation="vertical">
  <gstock-navigation-item icon="home">Dashboard</gstock-navigation-item>
  <gstock-navigation-item icon="inbox">
    Inbox
    <gstock-navigation-menu slot="menu">
      <gstock-navigation-menu-item>
        Menu Item 1
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
      <gstock-navigation-menu-item>
        Menu Item 2
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
      <gstock-navigation-menu-item>
        Menu Item 3
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
    </gstock-navigation-menu>
  </gstock-navigation-item>
  <gstock-navigation-item icon="layers">
    Layers
    <gstock-navigation-menu slot="menu">
      <gstock-navigation-menu-item>
        Menu Item 1
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
      <gstock-navigation-menu-item>
        Menu Item 2
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
      <gstock-navigation-menu-item>
        Menu Item 3
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
        <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      </gstock-navigation-menu-item>
    </gstock-navigation-menu>
  </gstock-navigation-item>
  </gstock-navigation>
  <div class="navigation-content">Main Content</div>
</div>

<gstock-button prefix="menu" size="small">Show Drawer</gstock-button>

<script type="module">
  const content = document.querySelector('content');
  const navigation = document.querySelector('gstock-navigation');
  const button = document.querySelector('gstock-button');

  button.addEventListener('click', (event) => {
    event.preventDefault();
    if (navigation.drawer.open) {
      navigation.drawer.hide();
      button.textContent = 'Show Drawer';
    } else {
      navigation.drawer.show();
      button.textContent = 'Hide Drawer';
    }
  });
</script>

<style>
  .navigation-wrapper {
    height: 300px;
    width: 100%;
    border: solid 2px #c30a0a;
    overflow-y: auto;
    display: inline-flex;
    position: relative;
  }

  .navigation-content {
    background-color: var(--gstock-legacy-color-grayscale-100);
    overflow-y: auto;
    padding: var(--gstock-legacy-spacing-7) var(--gstock-legacy-spacing-8);
    width: 100%;
    height: 100%;
    margin-left: var(--size);
  }
</style>