A side navigation container that provides quick access between views within an application.

For non-relative positions (start, end, top, bottom) the drawer is rendered as a native <dialog> element, providing modal semantics, automatic focus trapping, and a backdrop. For the relative position it is rendered inline as a <nav> landmark.

When content is provided in the mini slot, a compact icon-only variant is always displayed alongside the main drawer (hidden only while the full drawer is open).

The component integrates with the Invoker Commands API: an Ignite button or a native <button> with command="--show" / "--hide" / "--toggle" and commandfor pointing to this element will call the corresponding method declaratively without any JavaScript.
Element
igc-nav-drawer
Slots
default — Renders the main navigation content of the drawer.
mini — Renders the compact mini variant of the drawer.
CSS Parts
base — The base wrapper of the drawer.
main — The main content container of the drawer.
mini — The mini variant container of the drawer.

Constructors

Section titled "Constructors"

IgcNavDrawerComponent 

new IgcNavDrawerComponent(): IgcNavDrawerComponent

Defined in src/components/nav-drawer/nav-drawer.ts:162

Returns IgcNavDrawerComponent

Properties

Section titled "Properties"

keepOpenOnEscape

Section titled "keepOpenOnEscape"

Determines whether the drawer should remain open when the Escape key is pressed.

This attribute is only applicable when the drawer is in a non-relative position, as the Escape key does not trigger the closing of relative drawers.

 
keepOpenOnEscape: boolean = false

Defined in src/components/nav-drawer/nav-drawer.ts:142

Optional label

Section titled "label"

Sets an accessible label for the drawer.

In non-relative positions this label is applied to the modal <dialog> element. In relative position it labels the <nav> landmark.

When multiple navigation landmarks exist on the page each should receive a distinct label so screen-reader users can differentiate between them.

 
label: string

Defined in src/components/nav-drawer/nav-drawer.ts:156

open

Section titled "open"

Whether the drawer is open.

 
open: boolean = false

Defined in src/components/nav-drawer/nav-drawer.ts:130

position

Section titled "position"

Sets the position of the drawer.

  • start — anchored to the inline-start edge (default).
  • end — anchored to the inline-end edge.
  • top — anchored to the block-start edge.
  • bottom — anchored to the block-end edge.
  • relative — rendered inline within the page flow; no modal backdrop.
 
position: NavDrawerPosition = 'start'

Defined in src/components/nav-drawer/nav-drawer.ts:121

styles

Section titled "styles" 
styles: CSSResult[]

Defined in src/components/nav-drawer/nav-drawer.ts:67

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: "igc-nav-drawer" = 'igc-nav-drawer'

Defined in src/components/nav-drawer/nav-drawer.ts:66

Methods

Section titled "Methods"

addEventListener

Section titled "addEventListener"

Inherited from: EventEmitterMixin< IgcNavDrawerComponentEventMap, Constructor<LitElement> >(LitElement) 

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

emitEvent

Section titled "emitEvent"

Inherited from: EventEmitterMixin< IgcNavDrawerComponentEventMap, Constructor<LitElement> >(LitElement) 

emitEvent(type: K, eventInitDict: CustomEventInit<D>): boolean

Defined in src/components/common/mixins/event-emitter.ts:30

Parameters

  • type: K
  • eventInitDict: CustomEventInit<D>

Returns boolean

hide

Section titled "hide"

Closes the drawer. Returns true if the operation was successful, false if the drawer was already closed.

 
hide(): Promise<boolean>

Defined in src/components/nav-drawer/nav-drawer.ts:286

Returns Promise<boolean>

removeEventListener

Section titled "removeEventListener"

Inherited from: EventEmitterMixin< IgcNavDrawerComponentEventMap, Constructor<LitElement> >(LitElement) 

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

show

Section titled "show"

Opens the drawer. Returns true if the operation was successful, false if the drawer was already open.

 
show(): Promise<boolean>

Defined in src/components/nav-drawer/nav-drawer.ts:274

Returns Promise<boolean>

toggle

Section titled "toggle"

Toggles the open state of the drawer. Delegates to show() or hide() depending on the current state.

 
toggle(): Promise<boolean>

Defined in src/components/nav-drawer/nav-drawer.ts:298

Returns Promise<boolean>

register

Section titled "register" 
register(): void

Defined in src/components/nav-drawer/nav-drawer.ts:70

Returns void

Events

Section titled "Events"

igcClosed

Section titled "igcClosed" 
igcClosed: CustomEvent<void>

Defined in src/components/nav-drawer/nav-drawer.ts:27

igcClosing

Section titled "igcClosing" 
igcClosing: CustomEvent<void>

Defined in src/components/nav-drawer/nav-drawer.ts:26