Web Components NavDrawer

The Ignite UI for Web Components Navigation Drawer provides side navigation that can be expanded or collapsed within the content. A mini version provides quick access to navigation even when closed. Its content is completely customizable while also providing default menu item styling.

This sample demonstrates how to create IgcNavDrawerComponent component.

import {
  defineComponents, IgcNavDrawerComponent, IgcNavDrawerItemComponent,
  IgcIconComponent, registerIconFromText, IgcIconButtonComponent
} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './add-drawer-items.css';

defineComponents(IgcNavDrawerComponent, IgcIconComponent, IgcIconButtonComponent);

const searchIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';

const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

const menuIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>';

export class NavDrawerAddItems {
  private navDrawer: IgcNavDrawerComponent;

  constructor() {
    this.navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;
    const toggleButton = document.querySelector('igc-icon-button[name="menu"]') as IgcIconButtonComponent;

    this.navDrawer.onclick = this.navDrawerItemClick.bind(this);
    toggleButton.onclick = this.toggleNavDrawer.bind(this);

    registerIconFromText('home', homeIcon);
    registerIconFromText('search', searchIcon);
    registerIconFromText('menu', menuIcon);
  }

  public navDrawerItemClick = (e: any) => {
    const target = e.target as HTMLElement;
    const drawerItem = target.closest('igc-nav-drawer-item');

    if (drawerItem) {
      drawerItem.active = true;

      const drawerItems = Array.from<IgcNavDrawerItemComponent>(
        this.navDrawer.querySelectorAll('igc-nav-drawer-item')
      ).filter((item) => item !== drawerItem);

      drawerItems.forEach((item) => {
        item.active = false;
      });
    }
  }

  public toggleNavDrawer = (e: any) => {
    this.navDrawer?.toggle();
  }
}

new NavDrawerAddItems();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>NavDrawer Add Items</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div id="button-wrapper">
        <igc-icon-button name="menu" variant="flat"></igc-icon-button>
      </div>
        <igc-nav-drawer open="true">
            <igc-nav-drawer-header-item>
                Sample Drawer
            </igc-nav-drawer-header-item>

            <igc-nav-drawer-item>
                <igc-icon slot="icon" name="home"></igc-icon>
                <span slot="content">Home</span>
            </igc-nav-drawer-item>

            <igc-nav-drawer-item>
                <igc-icon slot="icon" name="search"></igc-icon>
                <span slot="content">Search</span>
            </igc-nav-drawer-item>
        </igc-nav-drawer>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

#button-wrapper{
    padding: 16px;
}

igc-icon-button::part(icon) {
    --size: 32px;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents
cmd

import { defineComponents, IgcNavDrawerComponent } from 'igniteui-webcomponents';

defineComponents(IgcNavDrawerComponent);
ts

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

The simplest way to start using the IgcNavDrawerComponent is as follows:

<igc-nav-drawer open="true">
    <igc-nav-drawer-header-item>
        Sample Drawer
    </igc-nav-drawer-header-item>
    <igc-nav-drawer-item>
        <igc-icon slot="icon" name="home"></igc-icon>
        <span slot="content">Home</span>
    </igc-nav-drawer-item>
    <igc-nav-drawer-item>
        <igc-icon slot="icon" name="search"></igc-icon>
        <span slot="content">Search</span>
    </igc-nav-drawer-item>
</igc-nav-drawer>
html

If all went well, you should see the following in your browser:

import {
  defineComponents, IgcNavDrawerComponent, IgcNavDrawerItemComponent,
  IgcIconComponent, registerIconFromText, IgcIconButtonComponent
} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './add-drawer-items.css';

defineComponents(IgcNavDrawerComponent, IgcIconComponent, IgcIconButtonComponent);

const searchIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';

const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

const menuIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>';

export class NavDrawerAddItems {
  private navDrawer: IgcNavDrawerComponent;

  constructor() {
    this.navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;
    const toggleButton = document.querySelector('igc-icon-button[name="menu"]') as IgcIconButtonComponent;

    this.navDrawer.onclick = this.navDrawerItemClick.bind(this);
    toggleButton.onclick = this.toggleNavDrawer.bind(this);

    registerIconFromText('home', homeIcon);
    registerIconFromText('search', searchIcon);
    registerIconFromText('menu', menuIcon);
  }

  public navDrawerItemClick = (e: any) => {
    const target = e.target as HTMLElement;
    const drawerItem = target.closest('igc-nav-drawer-item');

    if (drawerItem) {
      drawerItem.active = true;

      const drawerItems = Array.from<IgcNavDrawerItemComponent>(
        this.navDrawer.querySelectorAll('igc-nav-drawer-item')
      ).filter((item) => item !== drawerItem);

      drawerItems.forEach((item) => {
        item.active = false;
      });
    }
  }

  public toggleNavDrawer = (e: any) => {
    this.navDrawer?.toggle();
  }
}

new NavDrawerAddItems();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>NavDrawer Add Items</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div id="button-wrapper">
        <igc-icon-button name="menu" variant="flat"></igc-icon-button>
      </div>
        <igc-nav-drawer open="true">
            <igc-nav-drawer-header-item>
                Sample Drawer
            </igc-nav-drawer-header-item>

            <igc-nav-drawer-item>
                <igc-icon slot="icon" name="home"></igc-icon>
                <span slot="content">Home</span>
            </igc-nav-drawer-item>

            <igc-nav-drawer-item>
                <igc-icon slot="icon" name="search"></igc-icon>
                <span slot="content">Search</span>
            </igc-nav-drawer-item>
        </igc-nav-drawer>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

#button-wrapper{
    padding: 16px;
}

igc-icon-button::part(icon) {
    --size: 32px;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

While any content can be provided in the drawer, the IgcNavDrawerItemComponent is available to apply out-of-the-box styling to the items.

To enhance our component a bit, we can use it in conjunction with the IgcNavbarComponent. This way we can achieve a more completed look and use the drawer's methods. Let's look at how we can use this in the next example:

<igc-navbar>
  <igc-icon slot="start" name="menu" id="menu"></igc-icon>
  <h2>Home</h2>
</igc-navbar>

<igc-nav-drawer id="navDrawer">
    <igc-nav-drawer-header-item>
        Sample Drawer
    </igc-nav-drawer-header-item>
    <igc-nav-drawer-item>
        <igc-icon slot="icon" name="home"></igc-icon>
        <span slot="content">Home</span>
    </igc-nav-drawer-item>
    <igc-nav-drawer-item>
        <igc-icon slot="icon" name="search"></igc-icon>
        <span slot="content">Search</span>
    </igc-nav-drawer-item>
</igc-nav-drawer>
html

Let's also add some radio buttons to display all position values. This way whenever one gets selected, we will change the position of the drawer.

// ...
import { defineComponents, IgcNavDrawerComponent, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';

defineComponents(IgcNavDrawerComponent, IgcRadioComponent, IgcRadioGroupComponent);
this.navDrawer = document.getElementById('navDrawer') as IgcNavDrawerComponent;
this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;
this.radioGroup.addEventListener('click', (radio: any) => {
    this.navDrawer.position = radio.target.value;
});
ts

<igc-radio-group id="radio-group" alignment="horizontal">
    <igc-radio name="position" value="start" label-position="after" checked>Start</igc-radio>
    <igc-radio name="position" value="end" label-position="after">End</igc-radio>
    <igc-radio name="position" value="top" label-position="after">Top</igc-radio>
    <igc-radio name="position" value="bottom" label-position="after">Bottom</igc-radio>
</igc-radio-group>
html

And finally, we need a way to open and close our navigation drawer. There are a couple of ways to achieve this, but for the sake of this example we will do the following:

// ...
const menu = document.getElementById('menu');
const navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;

menu!.addEventListener('click', () => {
    navDrawer.show();
})

document.getElementById('root')!.onclick = (e) => {
    if (e.target != document.getElementById('navDrawer')) {
        navDrawer.hide();
    }
}
ts

If all goes well, your component should now look like this:

import { defineComponents, IgcNavbarComponent, IgcNavDrawerComponent, IgcNavDrawerItemComponent,
  IgcIconComponent, IgcRadioComponent, IgcRadioGroupComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcNavbarComponent, IgcNavDrawerComponent, IgcIconComponent, IgcRadioComponent, IgcRadioGroupComponent);

const searchIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';

const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

const menuIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>';
export class NavDrawerAddPositionsNavbar {
    constructor() {
      const menu = document.getElementById('menu');
      const navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;
      const navbarHeader = document.getElementById('navbar-header');

      menu!.addEventListener('click', () => {
        navDrawer.show();
      })

      document.getElementById('nav-drawer-container')!.onclick = (e) => {
        if(e.target === document.getElementById('content')) {
          navDrawer.hide();
        }
      }

      navDrawer.onclick = (e) => {
        const target = e.target as HTMLElement;
        const drawerItem = target.closest('igc-nav-drawer-item');

        if (drawerItem) {
          drawerItem.active = true;
          const span = drawerItem.querySelector('span');
          navbarHeader!.innerHTML = span!.innerText;

          const drawerItems = Array.from<IgcNavDrawerItemComponent>(
            navDrawer.querySelectorAll('igc-nav-drawer-item')
          ).filter((item) => item !== drawerItem);

          drawerItems.forEach((item) => {
            item.active = false;
          });
        }
      }

      const radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;

      radioGroup.addEventListener('click', (radio: any) => {
          navDrawer.position = radio.target.value;
      });

      registerIconFromText('home', homeIcon);
      registerIconFromText('menu', menuIcon);
      registerIconFromText('search', searchIcon);
    }
}

new NavDrawerAddPositionsNavbar();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>NavDrawer Add Positions and Navbar</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div id="nav-drawer-container" class="container sample center">
        <igc-nav-drawer id="navDrawer" style="position: relative">
          <igc-nav-drawer-header-item>
              Sample Drawer
          </igc-nav-drawer-header-item>

          <igc-nav-drawer-item active>
              <igc-icon slot="icon" name="home"></igc-icon>
              <span slot="content">Home</span>
          </igc-nav-drawer-item>

          <igc-nav-drawer-item>
              <igc-icon slot="icon" name="search"></igc-icon>
              <span slot="content">Search</span>
          </igc-nav-drawer-item>
        </igc-nav-drawer>

        <div id="content" style="width: 100%; height: inherit;">
          <igc-radio-group id="radio-group" alignment="horizontal" style="margin-bottom: 10px;">
            <igc-radio name="position" value="start" label-position="after" checked>Start</igc-radio>
            <igc-radio name="position" value="end" label-position="after">End</igc-radio>
            <igc-radio name="position" value="top" label-position="after">Top</igc-radio>
            <igc-radio name="position" value="bottom" label-position="after">Bottom</igc-radio>
          </igc-radio-group>

          <igc-navbar>
            <igc-icon slot="start" name="menu" id="menu"></igc-icon>
            <h2 id="navbar-header">Home</h2>
          </igc-navbar>
        </div>
      </div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Mini Variant

With the mini variant, the Navigation Drawer changes its width instead of closing. It is used to maintain quick navigation, available at all times, leaving just the icons. To achieve that, you only need to set up the mini slot of the drawer.

<igc-nav-drawer position="start">
    <igc-nav-drawer-header-item>Sample Drawer</igc-nav-drawer-header-item>
    <igc-nav-drawer-item>
        <igc-icon slot="icon" name="home"></igc-icon>
        <span slot="content">Home</span>
    </igc-nav-drawer-item>
    <igc-nav-drawer-item>
        <igc-icon slot="icon" name="search"></igc-icon>
        <span slot="content">Search</span>
    </igc-nav-drawer-item>
    <div slot="mini">
        <igc-nav-drawer-item>
            <igc-icon slot="icon" name="home"></igc-icon>
        </igc-nav-drawer-item>
        <igc-nav-drawer-item>
            <igc-icon slot="icon" name="search"></igc-icon>
        </igc-nav-drawer-item>
    </div>
</igc-nav-drawer>
html

And here's the result:

import { defineComponents, IgcNavDrawerComponent, IgcNavDrawerItemComponent,
  IgcButtonComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcNavDrawerComponent, IgcButtonComponent, IgcIconComponent);

const searchIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';

const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

export class NavDrawerAddMini {
    constructor() {
      const btn = document.getElementById('toggleBtn');
      const navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;

      btn!.addEventListener('click', () => {
        navDrawer.toggle();
      })

      document.getElementById('nav-drawer-container')!.onclick = (e) => {
        if(e.target === document.getElementById('content')) {
          navDrawer.hide();
        }
      }

      navDrawer.onclick = (e) => {
        const target = e.target as HTMLElement;
        const drawerItem = target.closest('igc-nav-drawer-item');

        if (drawerItem) {
          const iconName = drawerItem.querySelector('igc-icon')!.name;
          const icons = document.querySelectorAll(`igc-icon`);

          icons.forEach(icon => {
            const parentItem = icon.parentElement! as IgcNavDrawerItemComponent;

            if(icon.name === iconName) {
              parentItem.active = true;
            } else {
              parentItem.active = false;
            }
          })
        }
      }

      registerIconFromText('search', searchIcon);

      registerIconFromText('home', homeIcon);
    }
}

new NavDrawerAddMini();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>NavDrawer Add Mini</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
        <div id="nav-drawer-container" style="display: flex; height: inherit;">
          <igc-nav-drawer id="navDrawer">
              <igc-nav-drawer-item>
                  <igc-icon slot="icon" name="home"></igc-icon>
                  <span slot="content">Home</span>
              </igc-nav-drawer-item>

              <igc-nav-drawer-item>
                  <igc-icon slot="icon" name="search"></igc-icon>
                  <span slot="content">Search</span>
              </igc-nav-drawer-item>

              <div slot="mini">
                <igc-nav-drawer-item>
                  <igc-icon slot="icon" name="home"></igc-icon>
                </igc-nav-drawer-item>

                <igc-nav-drawer-item>
                  <igc-icon slot="icon" name="search"></igc-icon>
                </igc-nav-drawer-item>
              </div>
          </igc-nav-drawer>

          <div id="content" style="width: 100%">
            <igc-button id="toggleBtn" style="margin-left: 70px;">Toggle</igc-button>
          </div>
        </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Styling

The IgcNavDrawerComponent exposes several CSS parts - base, main, and mini, giving you full control over their styling.

igc-nav-drawer::part(base) {
  background: var(--ig-secondary-500);
}

igc-nav-drawer-item::part(base) {
  color: var(--ig-secondary-500-contrast);
}

igc-nav-drawer-item::part(base):hover {
  background-color: var(--ig-gray-800);
}

igc-nav-drawer-item[active]::part(base) {
  background: var(--ig-warn-500);
  color: var(--ig-warn-500-contrast);
}

igc-nav-drawer-header-item {
  color: var(--ig-warn-500);
}
scss

import { defineComponents, IgcNavDrawerComponent, IgcNavDrawerItemComponent, IgcIconComponent,
         registerIconFromText, IgcIconButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './drawer-styling.css';

defineComponents(IgcNavDrawerComponent, IgcIconComponent, IgcIconButtonComponent);

const searchIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';

const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

const menuIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>';

export class NavDrawerStyling {
  private navDrawer: IgcNavDrawerComponent;

  constructor() {
    this.navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;
    const toggleButton = document.querySelector('igc-icon-button[name="menu"]') as IgcIconButtonComponent;

    this.navDrawer.onclick = this.navDrawerItemClick.bind(this);
    toggleButton.onclick = this.toggleNavDrawer.bind(this);

    registerIconFromText('home', homeIcon);
    registerIconFromText('search', searchIcon);
    registerIconFromText('menu', menuIcon);
  }

  public navDrawerItemClick = (e: any) => {
    const target = e.target as HTMLElement;
    const drawerItem = target.closest('igc-nav-drawer-item');

    if (drawerItem) {
      drawerItem.active = true;

      const drawerItems = Array.from<IgcNavDrawerItemComponent>(
        this.navDrawer.querySelectorAll('igc-nav-drawer-item')
      ).filter((item) => item !== drawerItem);

      drawerItems.forEach((item) => {
        item.active = false;
      });
    }
  }

  public toggleNavDrawer = (e: any) => {
    this.navDrawer?.toggle();
  }
}

new NavDrawerStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>NavDrawer Add Positions and Navbar</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div id="button-wrapper">
        <igc-icon-button name="menu" variant="flat"></igc-icon-button>
      </div>
      <igc-nav-drawer id="navDrawer" open="true" style="position: relative">
        <igc-nav-drawer-header-item>
            Sample Drawer
        </igc-nav-drawer-header-item>

        <igc-nav-drawer-item>
            <igc-icon slot="icon" name="home"></igc-icon>
            <span slot="content">Home</span>
        </igc-nav-drawer-item>

        <igc-nav-drawer-item>
            <igc-icon slot="icon" name="search"></igc-icon>
            <span slot="content">Search</span>
        </igc-nav-drawer-item>
      </igc-nav-drawer>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

igc-nav-drawer::part(base) {
    background: #2d313a;
}

igc-nav-drawer-item::part(base) {
    color: #fff;
}

igc-nav-drawer-item::part(base):hover {
    background-color: #3D4149;
}

igc-nav-drawer-item[active]::part(base) {
    background: #f3c03e;
    color: #2c2c2c;
}

igc-nav-drawer-header-item {
    color: #f3c03e;
}

#button-wrapper{
    padding: 16px;
}

igc-icon-button::part(icon) {
    --size: 32px;
    color: #f3c03e
}

igc-icon-button::part(base) {
    background-color: #2c2c2c;
}

igc-icon-button::part(base):hover {
    background-color: #3D4149;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Web Components Navigation Drawer Overview

Web Components Navigation Drawer Example

Usage

Adding Navigation Drawer Items

Navbar Integration

Mini Variant

Styling

API References

Additional Resources