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.
<!DOCTYPE html><html><head><title>NavDrawer Add Items</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divid="button-wrapper"><igc-icon-buttonname="menu"variant="flat"></igc-icon-button></div><igc-nav-draweropen="true"><igc-nav-drawer-header-item>
Sample Drawer
</igc-nav-drawer-header-item><igc-nav-drawer-item><igc-iconslot="icon"name="home"></igc-icon><spanslot="content">Home</span></igc-nav-drawer-item><igc-nav-drawer-item><igc-iconslot="icon"name="search"></igc-icon><spanslot="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) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
<!DOCTYPE html><html><head><title>NavDrawer Add Items</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divid="button-wrapper"><igc-icon-buttonname="menu"variant="flat"></igc-icon-button></div><igc-nav-draweropen="true"><igc-nav-drawer-header-item>
Sample Drawer
</igc-nav-drawer-header-item><igc-nav-drawer-item><igc-iconslot="icon"name="home"></igc-icon><spanslot="content">Home</span></igc-nav-drawer-item><igc-nav-drawer-item><igc-iconslot="icon"name="search"></igc-icon><spanslot="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) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Navbar Integration
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:
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:
<!DOCTYPE html><html><head><title>NavDrawer Add Positions and Navbar</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divid="nav-drawer-container"class="container sample center"><igc-nav-drawerid="navDrawer"style="position: relative"><igc-nav-drawer-header-item>
Sample Drawer
</igc-nav-drawer-header-item><igc-nav-drawer-itemactive><igc-iconslot="icon"name="home"></igc-icon><spanslot="content">Home</span></igc-nav-drawer-item><igc-nav-drawer-item><igc-iconslot="icon"name="search"></igc-icon><spanslot="content">Search</span></igc-nav-drawer-item></igc-nav-drawer><divid="content"style="width: 100%; height: inherit;"><igc-radio-groupid="radio-group"alignment="horizontal"style="margin-bottom: 10px;"><igc-radioname="position"value="start"label-position="after"checked>Start</igc-radio><igc-radioname="position"value="end"label-position="after">End</igc-radio><igc-radioname="position"value="top"label-position="after">Top</igc-radio><igc-radioname="position"value="bottom"label-position="after">Bottom</igc-radio></igc-radio-group><igc-navbar><igc-iconslot="start"name="menu"id="menu"></igc-icon><h2id="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) { %><scriptsrc="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.
<!DOCTYPE html><html><head><title>NavDrawer Add Mini</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divid="nav-drawer-container"style="display: flex; height: inherit;"><igc-nav-drawerid="navDrawer"><igc-nav-drawer-item><igc-iconslot="icon"name="home"></igc-icon><spanslot="content">Home</span></igc-nav-drawer-item><igc-nav-drawer-item><igc-iconslot="icon"name="search"></igc-icon><spanslot="content">Search</span></igc-nav-drawer-item><divslot="mini"><igc-nav-drawer-item><igc-iconslot="icon"name="home"></igc-icon></igc-nav-drawer-item><igc-nav-drawer-item><igc-iconslot="icon"name="search"></igc-icon></igc-nav-drawer-item></div></igc-nav-drawer><divid="content"style="width: 100%"><igc-buttonid="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) { %><scriptsrc="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.
<!DOCTYPE html><html><head><title>NavDrawer Add Positions and Navbar</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divid="button-wrapper"><igc-icon-buttonname="menu"variant="flat"></igc-icon-button></div><igc-nav-drawerid="navDrawer"open="true"style="position: relative"><igc-nav-drawer-header-item>
Sample Drawer
</igc-nav-drawer-header-item><igc-nav-drawer-item><igc-iconslot="icon"name="home"></igc-icon><spanslot="content">Home</span></igc-nav-drawer-item><igc-nav-drawer-item><igc-iconslot="icon"name="search"></igc-icon><spanslot="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) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html