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.
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 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

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 | undefined

open

Section titled "open"

Whether the drawer is open.

 
open: boolean

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

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>

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>

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>

Returns Promise<boolean>

Events

Section titled "Events"

onClosed

Section titled "onClosed"

Emitted just after the drawer is closed by a user interaction.

 
onClosed(args: CustomEvent<void>): void

Parameters

Returns void

onClosing

Section titled "onClosing"

Emitted just before the drawer is closed by a user interaction. Cancelable — call

 
onClosing(args: CustomEvent<void>): void

Parameters

Returns void