Ignite UI for Angular Navigation Drawer - Documentation

The Ignite UI Navigation Drawer is a collapsible side navigation container commonly used in combination with the Navbar.

Example:

<igx-nav-drawer id="navigation" [isOpen]="true">
  <ng-template igxDrawer>
    <nav>
      <span igxDrawerItem [isHeader]="true">Email</span>
      <span igxDrawerItem igxRipple>Inbox</span>
      <span igxDrawerItem igxRipple>Deleted</span>
      <span igxDrawerItem igxRipple>Sent</span>
    </nav>
  </ng-template>
</igx-nav-drawer>

Constructors

Section titled "Constructors"

IgxNavigationDrawerComponent 

new IgxNavigationDrawerComponent(): IgxNavigationDrawerComponent

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:455

Returns IgxNavigationDrawerComponent

Properties

Section titled "Properties"

closed

Section titled "closed"

Event fired when the Navigation Drawer has closed.

<igx-nav-drawer (closed)='onClosed()'></igx-nav-drawer>
closed: EventEmitter<any>

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:248

closing

Section titled "closing"

Event fired as the Navigation Drawer is about to close.

<igx-nav-drawer (closing)='onClosing()'></igx-nav-drawer>
closing: EventEmitter<any>

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:240

disableAnimation

Section titled "disableAnimation"

Enables/disables the animation, when toggling the drawer. Set to false by default.

<igx-nav-drawer [disableAnimation]="true"></igx-nav-drawer>
disableAnimation: boolean = false

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:192

enableGestures

Section titled "enableGestures"

Enables the use of touch gestures to manipulate the drawer:

  • swipe/pan from edge to open, swipe-toggle and pan-drag.
// get
let gesturesEnabled = this.navdrawer.enableGestures;
<!--set-->
<igx-nav-drawer [enableGestures]='true'></igx-nav-drawer>
enableGestures: boolean = true

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:115

id

Section titled "id"

ID of the component

// get
let myNavDrawerId = this.navdrawer.id;
<!--set-->
 <igx-nav-drawer id='navdrawer'></igx-nav-drawer>
id: string

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:84

miniWidth

Section titled "miniWidth"

Width of the drawer in its mini state.

// get
let navDrawerMiniWidth = this.navdrawer.miniWidth;
<!--set-->
<igx-nav-drawer [miniWidth]="'34px'"></igx-nav-drawer>
miniWidth: string

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:207

opened

Section titled "opened"

Event fired when the Navigation Drawer has opened.

<igx-nav-drawer (opened)='onOpened()'></igx-nav-drawer>
opened: EventEmitter<any>

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:232

opening

Section titled "opening"

Event fired as the Navigation Drawer is about to open.

<igx-nav-drawer (opening)='onOpening()'></igx-nav-drawer>
opening: EventEmitter<any>

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:224

pinChange

Section titled "pinChange"

Pinned state change output for two-way binding.

<igx-nav-drawer [(pin)]='isPinned'></igx-nav-drawer>
pinChange: EventEmitter<boolean>

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:216

pinThreshold

Section titled "pinThreshold"

Minimum device width required for automatic pin to be toggled. Default is 1024, can be set to a falsy value to disable this behavior.

// get
let navDrawerPinThreshold = this.navdrawer.pinThreshold;
<!--set-->
<igx-nav-drawer [pinThreshold]='1024'></igx-nav-drawer>
pinThreshold: number = 1024

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:136

position

Section titled "position"

Position of the Navigation Drawer. Can be "left"(default) or "right".

// get
let myNavDrawerPosition = this.navdrawer.position;
<!--set-->
<igx-nav-drawer [position]="'left'"></igx-nav-drawer>
position: string = 'left'

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:99

Accessors

Section titled "Accessors"

isOpen

Section titled "isOpen"

State of the drawer.

// get
let navDrawerIsOpen = this.navdrawer.isOpen;
<!--set-->
<igx-nav-drawer [isOpen]='false'></igx-nav-drawer>

Two-way data binding.

<!--set-->
<igx-nav-drawer [(isOpen)]='model.isOpen'></igx-nav-drawer>
get isOpen(): boolean

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:280

Returns boolean 

set isOpen(value: boolean): void

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:283

Parameters

  • value: boolean

Returns void

pin

Section titled "pin"

When pinned the drawer is relatively positioned instead of sitting above content. May require additional layout styling.

// get
let navDrawerIsPinned = this.navdrawer.pin;
<!--set-->
<igx-nav-drawer [pin]="false"></igx-nav-drawer>
get pin(): boolean

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:153

Returns boolean 

set pin(v: boolean): void

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:156

Parameters

  • v: boolean

Returns void

width

Section titled "width" 
set width(value: string): void

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:180

Parameters

  • value: string

Returns void

Methods

Section titled "Methods"

close

Section titled "close"

Close the Navigation Drawer. Has no effect if already closed.

this.navdrawer.close();
close(): void

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:583

Returns void

open

Section titled "open"

Open the Navigation Drawer. Has no effect if already opened.

this.navdrawer.open();
open(): void

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:552

Returns void

toggle

Section titled "toggle"

Toggle the open state of the Navigation Drawer.

this.navdrawer.toggle();
toggle(): void

Defined in projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:537

Returns void