Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcNavDrawerComponent

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.

igc-nav-drawer

igcClosing - Emitted just before the drawer is closed by a user interaction. Cancelable — call event.preventDefault() to abort the closing sequence.

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

  • Renders the main navigation content of the drawer.

mini - Renders the compact mini variant of the drawer.

base - The base wrapper of the drawer.

main - The main content container of the drawer.

mini - The mini variant container of the drawer.

Hierarchy

Hierarchy

  • EventEmitterInterface<IgcNavDrawerComponentEventMap, this> & LitElement<this>
    • IgcNavDrawerComponent

Properties

Methods

Properties

keepOpenOnEscape: boolean = false

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.

keep-open-on-escape

false
label?: string

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

open: boolean = false

Whether the drawer is open.

open

false
position: NavDrawerPosition = 'start'

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

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

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

MDN Reference

Methods