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.

Properties

Section titled "Properties"

keepOpenOnEscape

Section titled "keepOpenOnEscape"

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

This 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:148

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:162

open

Section titled "open"

Whether the drawer is open.

 
open: boolean = false

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

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:127

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:64

Methods

Section titled "Methods"

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:270

Returns Promise<boolean>

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:265

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:275

Returns Promise<boolean>