diff --git a/CHANGELOG.md b/CHANGELOG.md
index 178ce9d76..300c1e61b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 ### Added
+- #### Nav Drawer
+  - The drawer for non-relative positions are now implemented using the native Popover API, providing built-in modal semantics, focus trapping, and accessibility support.
+  - Added `keepOpenOnEscape` property — prevents the drawer from closing when the user presses the **Escape** key (non-relative positions only).
+  - Added `igcClosing` event — emitted just before the drawer is closed by user interaction. Cancelable.
+  - Added `igcClosed` event — emitted just after the drawer is closed by user interaction.
+
+### Changed
+- #### Nav Drawer
+  - The `overlay` CSS part has been removed. The native `<dialog>` element's `::backdrop` pseudo-element should be used for backdrop styling instead.
 - #### Form controls
   - `IgcInput`, `IgcMaskInput`, `IgcDateTimeInput`, `IgcCheckbox`, `IgcRadio`, `IgcSwitch`, `IgcDatePicker`, and `IgcDateRangePicker` now submit their associated form on **Enter** key press, matching native browser behavior.
 
diff --git a/src/components/nav-drawer/nav-drawer.spec.ts b/src/components/nav-drawer/nav-drawer.spec.ts
index 9247367df..cefccab13 100644
--- a/src/components/nav-drawer/nav-drawer.spec.ts
+++ b/src/components/nav-drawer/nav-drawer.spec.ts
@@ -1,7 +1,14 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import {
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  waitUntil,
+} from '@open-wc/testing';
 import type { TemplateResult } from 'lit';
-
+import { spy } from 'sinon';
 import { defineComponents } from '../common/definitions/defineComponents.js';
+import { simulateClick } from '../common/utils.spec.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcNavDrawerComponent from './nav-drawer.js';
 
@@ -12,12 +19,6 @@ describe('Navigation Drawer', () => {
 
   let navDrawer: IgcNavDrawerComponent;
 
-  // Workaround since transitionend is not emitted in the tests
-  async function runWithTransition(awaitable: Promise<boolean>) {
-    navDrawer.renderRoot.dispatchEvent(new Event('transitionend'));
-    return await awaitable;
-  }
-
   describe('Accessibility', () => {
     beforeEach(async () => {
       navDrawer = await createNavDrawer();
@@ -29,7 +30,8 @@ describe('Navigation Drawer', () => {
     });
 
     it('passes the a11y audit (open state)', async () => {
-      await runWithTransition(navDrawer.show());
+      await navDrawer.show();
+      await elementUpdated(navDrawer);
       expect(navDrawer.open).to.be.true;
 
       await expect(navDrawer).dom.to.be.accessible();
@@ -63,16 +65,34 @@ describe('Navigation Drawer', () => {
       expect(navDrawer).to.contain('igc-nav-drawer-item');
     });
 
-    it('render navigation drawer slots', async () => {
+    it('renders dialog-based shadow DOM for non-relative position', async () => {
       navDrawer = await createNavDrawer();
 
       expect(navDrawer).shadowDom.equal(`
-        <div part="overlay"></div>
-        <div inert part="base">
+        <dialog aria-modal="true" part="base">
           <div part="main">
             <slot></slot>
           </div>
+        </dialog>
+        <div part="mini hidden" popover="manual">
+          <slot name="mini"></slot>
         </div>
+      `);
+    });
+
+    it('renders nav-based shadow DOM for relative position', async () => {
+      navDrawer = await createNavDrawer(html`
+        <igc-nav-drawer position="relative">
+          <igc-nav-drawer-item></igc-nav-drawer-item>
+        </igc-nav-drawer>
+      `);
+
+      expect(navDrawer).shadowDom.equal(`
+        <nav inert part="base">
+          <div part="main">
+            <slot></slot>
+          </div>
+        </nav>
         <div part="mini hidden">
           <slot name="mini"></slot>
         </div>
@@ -123,25 +143,270 @@ describe('Navigation Drawer', () => {
     });
 
     it('`show`', async () => {
-      await runWithTransition(navDrawer.show());
+      expect(await navDrawer.show()).to.be.true;
       expect(navDrawer.open).to.be.true;
-      expect(await runWithTransition(navDrawer.show())).to.be.false;
+      expect(await navDrawer.show()).to.be.false;
     });
 
     it('`hide`', async () => {
-      await runWithTransition(navDrawer.toggle());
-      await runWithTransition(navDrawer.hide());
+      await navDrawer.toggle();
+      expect(await navDrawer.hide()).to.be.true;
       expect(navDrawer.open).to.be.false;
-      expect(await runWithTransition(navDrawer.hide())).to.be.false;
+      expect(await navDrawer.hide()).to.be.false;
     });
 
     it('`toggle`', async () => {
-      await runWithTransition(navDrawer.toggle());
+      expect(await navDrawer.toggle()).to.be.true;
+      expect(navDrawer.open).to.be.true;
+
+      expect(await navDrawer.toggle()).to.be.true;
+      expect(navDrawer.open).to.be.false;
+    });
+  });
+
+  describe('Events & Behaviors', () => {
+    let nativeDialog: HTMLDialogElement;
+
+    beforeEach(async () => {
+      navDrawer = await createNavDrawer();
+      nativeDialog = navDrawer.renderRoot.querySelector('dialog')!;
+    });
+
+    it('should correctly render with initial open state', async () => {
+      navDrawer = await createNavDrawer(html`
+        <igc-nav-drawer open>
+          <igc-nav-drawer-item></igc-nav-drawer-item>
+        </igc-nav-drawer>
+      `);
+      nativeDialog = navDrawer.renderRoot.querySelector('dialog')!;
+
+      expect(navDrawer.open).to.be.true;
+      expect(nativeDialog.open).to.be.true;
+    });
+
+    it('should open dialog when position changes from relative to non-relative while open', async () => {
+      navDrawer = await createNavDrawer(html`
+        <igc-nav-drawer position="relative" open>
+          <igc-nav-drawer-item></igc-nav-drawer-item>
+        </igc-nav-drawer>
+      `);
+
       expect(navDrawer.open).to.be.true;
+      expect(navDrawer.renderRoot.querySelector('dialog')).to.be.null;
+
+      navDrawer.position = 'start';
+      await elementUpdated(navDrawer);
+
+      nativeDialog = navDrawer.renderRoot.querySelector('dialog')!;
+      expect(nativeDialog).to.exist;
+      expect(nativeDialog.open).to.be.true;
+    });
 
-      await runWithTransition(navDrawer.toggle());
+    it('should close the native dialog when position changes to relative while open', async () => {
+      await navDrawer.show();
+      await elementUpdated(navDrawer);
+
+      expect(nativeDialog.open).to.be.true;
+
+      navDrawer.position = 'relative';
+      await elementUpdated(navDrawer);
+
+      expect(navDrawer.open).to.be.true;
+      expect(navDrawer.renderRoot.querySelector('dialog')).to.be.null;
+    });
+
+    it('should close when the user presses Escape', async () => {
+      const eventSpy = spy(navDrawer, 'emitEvent');
+      await navDrawer.show();
+      await elementUpdated(navDrawer);
+
+      nativeDialog.dispatchEvent(new Event('cancel'));
+      await elementUpdated(navDrawer);
+      await waitUntil(() => !navDrawer.open);
+
+      expect(eventSpy.getCalls()).lengthOf(2);
+      expect(eventSpy.firstCall).calledWith('igcClosing');
+      expect(eventSpy.secondCall).calledWith('igcClosed');
+    });
+
+    it('should not close when Escape is pressed and `keepOpenOnEscape` is set', async () => {
+      const eventSpy = spy(navDrawer, 'emitEvent');
+
+      navDrawer.keepOpenOnEscape = true;
+      await navDrawer.show();
+      await elementUpdated(navDrawer);
+
+      nativeDialog.dispatchEvent(new Event('cancel'));
+      await elementUpdated(navDrawer);
+
+      expect(navDrawer.open).to.be.true;
+      expect(eventSpy.getCalls()).is.empty;
+    });
+
+    it('should close when clicking outside in non-relative position', async () => {
+      await navDrawer.show();
+      await elementUpdated(navDrawer);
+
+      const eventSpy = spy(navDrawer, 'emitEvent');
+      const { x, y } = nativeDialog.getBoundingClientRect();
+      simulateClick(nativeDialog, { clientX: x + 1, clientY: y - 1 });
+      await elementUpdated(navDrawer);
+
+      await waitUntil(() => eventSpy.calledWith('igcClosed'));
       expect(navDrawer.open).to.be.false;
     });
+
+    it('should not close when clicking inside the dialog', async () => {
+      await navDrawer.show();
+      await elementUpdated(navDrawer);
+
+      const eventSpy = spy(navDrawer, 'emitEvent');
+      const { x, y } = nativeDialog.getBoundingClientRect();
+
+      simulateClick(nativeDialog, { clientX: x + 1, clientY: y + 1 });
+      await elementUpdated(navDrawer);
+
+      expect(eventSpy).not.calledWith('igcClosed');
+      expect(navDrawer.open).to.be.true;
+    });
+
+    it('should not close when clicking outside in relative position', async () => {
+      const relativeNavDrawer = await createNavDrawer(html`
+        <igc-nav-drawer position="relative">
+          <igc-nav-drawer-item></igc-nav-drawer-item>
+        </igc-nav-drawer>
+      `);
+
+      await relativeNavDrawer.show();
+      await elementUpdated(relativeNavDrawer);
+
+      const eventSpy = spy(relativeNavDrawer, 'emitEvent');
+      const { x, y } = relativeNavDrawer.getBoundingClientRect();
+      simulateClick(relativeNavDrawer, { clientX: x + 1, clientY: y - 1 });
+      await elementUpdated(relativeNavDrawer);
+
+      expect(eventSpy.calledWith('igcClosed')).to.be.false;
+      expect(relativeNavDrawer.open).to.be.true;
+    });
+
+    it('can cancel `igcClosing` event', async () => {
+      await navDrawer.show();
+      await elementUpdated(navDrawer);
+
+      const eventSpy = spy(navDrawer, 'emitEvent');
+      navDrawer.addEventListener('igcClosing', (e) => e.preventDefault(), {
+        once: true,
+      });
+
+      nativeDialog.dispatchEvent(new Event('cancel'));
+      await elementUpdated(navDrawer);
+
+      expect(eventSpy).calledWith('igcClosing');
+      expect(eventSpy).not.calledWith('igcClosed');
+      expect(navDrawer.open).to.be.true;
+    });
+
+    it('does not close when keepOpenOnEscape is true and a non-cancelable close event is fired', async () => {
+      navDrawer.keepOpenOnEscape = true;
+      await navDrawer.show();
+      await elementUpdated(navDrawer);
+
+      nativeDialog.dispatchEvent(new Event('close'));
+      await elementUpdated(navDrawer);
+
+      expect(navDrawer.open).to.be.true;
+    });
+
+    it('programmatic hide does not emit events', async () => {
+      const eventSpy = spy(navDrawer, 'emitEvent');
+      await navDrawer.show();
+      await navDrawer.hide();
+
+      expect(eventSpy.getCalls()).is.empty;
+    });
+  });
+
+  describe('Mini slot popover', () => {
+    function getMiniElement(drawer: IgcNavDrawerComponent): HTMLDivElement {
+      return drawer.renderRoot.querySelector<HTMLDivElement>('[part~="mini"]')!;
+    }
+
+    it('is shown when the drawer is initially closed with mini content', async () => {
+      navDrawer = await createNavDrawerWithMini();
+      expect(getMiniElement(navDrawer).matches(':popover-open')).to.be.true;
+    });
+
+    it('is hidden when the drawer opens', async () => {
+      navDrawer = await createNavDrawerWithMini();
+      await navDrawer.show();
+      await elementUpdated(navDrawer);
+      expect(getMiniElement(navDrawer).matches(':popover-open')).to.be.false;
+    });
+
+    it('is shown again when the drawer closes', async () => {
+      navDrawer = await createNavDrawerWithMini();
+      await navDrawer.show();
+      await elementUpdated(navDrawer);
+      await navDrawer.hide();
+      await elementUpdated(navDrawer);
+      expect(getMiniElement(navDrawer).matches(':popover-open')).to.be.true;
+    });
+
+    it('is not shown when there is no mini slot content', async () => {
+      navDrawer = await createNavDrawer();
+      expect(getMiniElement(navDrawer).matches(':popover-open')).to.be.false;
+    });
+
+    it('is hidden when position changes to relative', async () => {
+      navDrawer = await createNavDrawerWithMini();
+      expect(getMiniElement(navDrawer).matches(':popover-open')).to.be.true;
+
+      navDrawer.position = 'relative';
+      await elementUpdated(navDrawer);
+
+      expect(getMiniElement(navDrawer).matches(':popover-open')).to.be.false;
+    });
+
+    it('is shown when position changes from relative to non-relative while closed', async () => {
+      navDrawer = await fixture<IgcNavDrawerComponent>(html`
+        <igc-nav-drawer position="relative">
+          <igc-nav-drawer-item slot="mini"></igc-nav-drawer-item>
+        </igc-nav-drawer>
+      `);
+
+      expect(getMiniElement(navDrawer).matches(':popover-open')).to.be.false;
+
+      navDrawer.position = 'start';
+      await elementUpdated(navDrawer);
+
+      expect(getMiniElement(navDrawer).matches(':popover-open')).to.be.true;
+    });
+
+    it('is shown when mini content is dynamically added', async () => {
+      navDrawer = await createNavDrawer();
+      expect(getMiniElement(navDrawer).matches(':popover-open')).to.be.false;
+
+      const item = document.createElement('igc-nav-drawer-item');
+      item.slot = 'mini';
+      navDrawer.appendChild(item);
+
+      await waitUntil(
+        () => getMiniElement(navDrawer).matches(':popover-open'),
+        'Expected mini popover to be shown after adding mini content'
+      );
+    });
+
+    it('is hidden when all mini content is removed', async () => {
+      navDrawer = await createNavDrawerWithMini();
+      expect(getMiniElement(navDrawer).matches(':popover-open')).to.be.true;
+
+      navDrawer.querySelector('[slot="mini"]')!.remove();
+
+      await waitUntil(
+        () => !getMiniElement(navDrawer).matches(':popover-open'),
+        'Expected mini popover to be hidden after removing mini content'
+      );
+    });
   });
 
   async function createNavDrawer(template?: TemplateResult) {
@@ -154,4 +419,12 @@ describe('Navigation Drawer', () => {
         `
     );
   }
+
+  async function createNavDrawerWithMini() {
+    return await fixture<IgcNavDrawerComponent>(html`
+      <igc-nav-drawer>
+        <igc-nav-drawer-item slot="mini"></igc-nav-drawer-item>
+      </igc-nav-drawer>
+    `);
+  }
 });
diff --git a/src/components/nav-drawer/nav-drawer.ts b/src/components/nav-drawer/nav-drawer.ts
index 676d30ddf..8766125f5 100644
--- a/src/components/nav-drawer/nav-drawer.ts
+++ b/src/components/nav-drawer/nav-drawer.ts
@@ -1,9 +1,15 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, type PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { Constructor } from '../common/mixins/constructor.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
+import { bindIf, numberInRangeInclusive } from '../common/util.js';
 import type { NavDrawerPosition } from '../types.js';
 import IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';
 import IgcNavDrawerItemComponent from './nav-drawer-item.js';
@@ -11,22 +17,37 @@ import { styles } from './themes/container.base.css.js';
 import { all } from './themes/container.js';
 import { styles as shared } from './themes/shared/container/nav-drawer.common.css.js';
 
+export interface IgcNavDrawerComponentEventMap {
+  igcClosing: CustomEvent<void>;
+  igcClosed: CustomEvent<void>;
+}
+
 /**
- * Represents a side navigation container that provides
- * quick access between views.
+ * A side navigation container that provides
+ * quick access between views within an application.
+ *
+ *
+ * When content is provided in the `mini` slot, a compact icon-only variant is
+ * displayed alongside the main drawer.
  *
  * @element igc-nav-drawer
  *
- * @slot - The default slot for the igc-navigation-drawer.
- * @slot mini - The slot for the mini variant of the igc-navigation-drawer.
+ * @fires igcClosing - Emitted just before the drawer is closed by a user interaction. Cancelable.
+ * @fires igcClosed - Emitted just after the drawer is closed by a user interaction.
+ *
+ * @slot - Renders the main navigation content of the drawer.
+ * @slot mini - Renders the compact mini variant of the drawer.
  *
- * @csspart base - The base wrapper of the igc-navigation-drawer.
- * @csspart main - The main container of the igc-navigation-drawer.
- * @csspart mini - The mini container of the igc-navigation-drawer.
+ * @csspart base - The base wrapper of the drawer.
+ * @csspart main - The main content container of the drawer.
+ * @csspart mini - The mini variant container of the drawer.
  */
-export default class IgcNavDrawerComponent extends LitElement {
+export default class IgcNavDrawerComponent extends EventEmitterMixin<
+  IgcNavDrawerComponentEventMap,
+  Constructor<LitElement>
+>(LitElement) {
   public static readonly tagName = 'igc-nav-drawer';
-  public static override styles = [styles, shared];
+  public static styles = [styles, shared];
 
   /* blazorSuppress */
   public static register(): void {
@@ -37,86 +58,283 @@ export default class IgcNavDrawerComponent extends LitElement {
     );
   }
 
+  //#region Internal state
+
+  private readonly _dialogRef = createRef<HTMLDialogElement>();
+  private readonly _miniRef = createRef<HTMLDivElement>();
+
   private readonly _slots = addSlotController(this, {
     slots: setSlots('mini'),
+    onChange: this._handleMiniState,
   });
 
+  private get _dialog(): HTMLDialogElement | undefined {
+    return this._dialogRef.value;
+  }
+
+  private get _mini(): HTMLDivElement | undefined {
+    return this._miniRef.value;
+  }
+
+  private get _hasMiniContent(): boolean {
+    return this._slots.hasAssignedElements('mini');
+  }
+
+  private get _isRelative(): boolean {
+    return this.position === 'relative';
+  }
+
+  //#endregion
+
+  //#region Public properties
+
   /**
-   * The position of the drawer.
-   * @attr
+   * 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.
+   *
+   * @attr position
+   * @default 'start'
    */
   @property({ reflect: true })
   public position: NavDrawerPosition = 'start';
 
   /**
-   * Determines whether the drawer is opened.
-   * @attr
+   * Whether the drawer is open.
+   *
+   * @attr open
+   * @default false
    */
   @property({ type: Boolean, reflect: true })
   public open = 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.
+   *
+   * @attr keep-open-on-escape
+   * @default false
+   */
+  @property({ type: Boolean, attribute: 'keep-open-on-escape' })
+  public keepOpenOnEscape = false;
+
+  /**
+   * 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.
+   *
+   * @attr label
+   */
+  @property()
+  public label?: string;
+
+  //#endregion
+
+  //#region Lit Lifecycle
+
   constructor() {
     super();
     addThemingController(this, all);
   }
 
-  private _waitTransitions() {
-    return new Promise<Event>((resolve) => {
-      this.renderRoot.addEventListener('transitionend', resolve, {
-        once: true,
-      });
-    });
+  protected override update(properties: PropertyValues<this>): void {
+    if (properties.has('position') && this._isRelative) {
+      this._dialog?.close();
+      const mini = this._mini;
+      if (mini?.matches(':popover-open')) {
+        mini.hidePopover();
+      }
+    }
+
+    super.update(properties);
+  }
+
+  protected override updated(properties: PropertyValues<this>): void {
+    if (properties.has('open') || properties.has('position')) {
+      this._handleOpenState();
+      this._handleMiniState();
+    }
+  }
+
+  //#endregion
+
+  //#region Event handlers
+
+  private _handleOpenState(): void {
+    if (this._isRelative) {
+      return;
+    }
+
+    this.open ? this._dialog?.showModal() : this._dialog?.close();
+  }
+
+  private _handleMiniState(): void {
+    if (this._isRelative) {
+      return;
+    }
+
+    const mini = this._mini;
+    if (!mini) {
+      return;
+    }
+
+    const isPopoverOpen = mini.matches(':popover-open');
+
+    if (!this._hasMiniContent || this.open) {
+      if (isPopoverOpen) {
+        mini.hidePopover();
+      }
+    } else if (!isPopoverOpen) {
+      mini.showPopover();
+    }
+  }
+
+  private _handleCancel(event: Event): void {
+    event.preventDefault();
+
+    if (!this.keepOpenOnEscape) {
+      this._closeWithEvent();
+    }
+  }
+
+  private _handleClose(): void {
+    if (this.open) {
+      this._dialog?.showModal();
+    }
   }
 
-  /** Opens the drawer. */
+  private _handleClick({ clientX, clientY, target }: PointerEvent): void {
+    if (this._dialog === target) {
+      const rect = this._dialog.getBoundingClientRect();
+      const inX = numberInRangeInclusive(clientX, rect.left, rect.right);
+      const inY = numberInRangeInclusive(clientY, rect.top, rect.bottom);
+
+      if (!(inX && inY)) {
+        this._closeWithEvent();
+      }
+    }
+  }
+
+  //#endregion
+
+  //#region Internal API
+
+  private _emitClosing(): boolean {
+    return this.emitEvent('igcClosing', { cancelable: true });
+  }
+
+  private async _closeWithEvent(): Promise<boolean> {
+    if (!(this.open && this._emitClosing())) {
+      return false;
+    }
+
+    this.open = false;
+    await this.updateComplete;
+
+    this.emitEvent('igcClosed');
+    return true;
+  }
+
+  //#endregion
+
+  //#region Public API
+
+  /** Opens the drawer. Returns `true` if the operation was successful, `false` if the drawer was already open. */
   public async show(): Promise<boolean> {
     if (this.open) {
       return false;
     }
 
     this.open = true;
-    await this._waitTransitions();
+    await this.updateComplete;
 
     return true;
   }
 
-  /** Closes the drawer. */
+  /** Closes the drawer. Returns `true` if the operation was successful, `false` if the drawer was already closed. */
   public async hide(): Promise<boolean> {
     if (!this.open) {
       return false;
     }
 
     this.open = false;
-    await this._waitTransitions();
+    await this.updateComplete;
 
     return true;
   }
 
-  /** Toggles the open state of the drawer. */
-  public async toggle(): Promise<boolean> {
+  /** Toggles the open state of the drawer. Delegates to `show()` or `hide()` depending on the current state. */
+  public toggle(): Promise<boolean> {
     return this.open ? this.hide() : this.show();
   }
 
-  protected override render() {
-    return html`
-      <div part="overlay" @click=${this.hide}></div>
-
-      <div part="base" .inert=${!this.open}>
-        <div part="main">
-          <slot></slot>
-        </div>
-      </div>
+  //#endregion
 
+  private _renderMiniVariant() {
+    return html`
       <div
+        ${ref(this._miniRef)}
         part=${partMap({
           mini: true,
-          hidden: !this._slots.hasAssignedElements('mini'),
+          hidden: !this._hasMiniContent,
         })}
+        .inert=${this.open}
+        .popover=${!this._isRelative ? 'manual' : null}
       >
         <slot name="mini"></slot>
       </div>
     `;
   }
+
+  private _renderContent() {
+    return html`
+      <div part="main">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  private _renderDialog() {
+    return html`
+      <dialog
+        ${ref(this._dialogRef)}
+        part="base"
+        aria-modal="true"
+        aria-label=${ifDefined(this.label)}
+        @click=${this._handleClick}
+        @cancel=${this._handleCancel}
+        @close=${bindIf(this.keepOpenOnEscape, this._handleClose)}
+      >
+        ${this._renderContent()}
+      </dialog>
+      ${this._renderMiniVariant()}
+    `;
+  }
+
+  private _renderRelative() {
+    return html`
+      <nav part="base" aria-label=${ifDefined(this.label)} .inert=${!this.open}>
+        ${this._renderContent()}
+      </nav>
+      ${this._renderMiniVariant()}
+    `;
+  }
+
+  protected override render() {
+    return html`${cache(
+      this._isRelative ? this._renderRelative() : this._renderDialog()
+    )}`;
+  }
 }
 
 declare global {
diff --git a/src/components/nav-drawer/themes/container.base.scss b/src/components/nav-drawer/themes/container.base.scss
index 3239946dc..562cd8a9f 100644
--- a/src/components/nav-drawer/themes/container.base.scss
+++ b/src/components/nav-drawer/themes/container.base.scss
@@ -3,182 +3,291 @@
 
 :host {
     --menu-full-width: #{rem(240px)};
+    --menu-height: 50vh;
+    --transition-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    --transition-duration: 0.35s;
 
     display: flex;
     flex-shrink: 0;
     font-family: var(--ig-font-family);
 
     [part='base'],
-    [part~='mini'] {
+    [part='mini'] {
         --ig-scrollbar-size: rem(8px);
 
-        position: fixed;
+        margin: unset;
+        border: unset;
+        outline-style: none;
         height: 100%;
         min-height: 100%;
         overflow-x: hidden;
-        inset-block: 0;
-        z-index: 999;
-        opacity: 1;
-        transition:
-            translate ease-out 0.3s,
-            0.3s,
-            opacity ease-out 0.3s,
-            0.3s;
-    }
-
-    [part~='mini'] {
-        min-width: var(--menu-mini-width);
-    }
-
-    [part='base'] {
-        width: var(--menu-full-width);
     }
 
-    [part='main'] {
-        width: 100%;
-    }
+    [part='mini'] {
+        width: var(--menu-mini-width);
+        transition-behavior: allow-discrete;
+        transition-duration: var(--transition-duration);
+        transition-timing-function: var(--transition-function);
+        transition-property: display, translate, overlay;
 
-    [part='overlay'] {
-        position: fixed;
-        inset: 0;
-        z-index: 2;
-        opacity: 1;
-        transition:
-            opacity ease-out 0.3s,
-            0.3s;
+        &::backdrop {
+            display: none;
+        }
     }
-}
 
-:host([position='relative']) {
     [part='base'] {
-        position: relative;
+        box-sizing: border-box;
         width: var(--menu-full-width);
-        box-shadow: none;
-        z-index: initial;
-        border-inline-end-style: solid;
-        border-inline-end-width: rem(1px);
-    }
+        padding: unset;
+        transition-behavior: allow-discrete;
+        transition-duration: var(--transition-duration);
+        transition-timing-function: var(--transition-function);
+        transition-property: translate, opacity, overlay, display;
 
-    [part~='mini'] {
-        position: relative;
-        border-inline-end-style: solid;
-        border-inline-end-width: rem(1px);
-    }
+        &::backdrop {
+            transition-behavior: allow-discrete;
+            transition-duration: var(--transition-duration);
+            transition-timing-function: var(--transition-function);
+            transition-property: opacity, display;
+            opacity: 0;
+        }
 
-    [part='overlay'] {
-        display: none;
-    }
-}
+        &:open::backdrop {
+            opacity: 1;
 
-:host([position='top']),
-:host([position='bottom']) {
-    [part='main'] {
-        width: 100%;
+            @starting-style {
+                opacity: 0;
+            }
+        }
     }
 
-    [part='base'] {
-        height: 50vh;
-        min-height: initial;
+    [part='main'] {
         width: 100%;
-        inset-inline: 0;
     }
 }
 
-:host([position='top']) [part='base'] {
-    top: 0;
-    bottom: auto;
-}
-
-:host([position='bottom']) [part='base'] {
-    top: auto;
-    bottom: 0;
-}
-
 :host([position='start']) {
     [part='base'],
-    [part~='mini'] {
-        inset-inline-start: 0;
+    [part='mini'] {
+        border: none;
         border-inline-end-style: solid;
         border-inline-end-width: rem(1px);
+        margin-inline-end: auto;
     }
 }
 
 :host([position='end']) {
     [part='base'],
-    [part~='mini'] {
-        inset-inline-end: 0;
+    [part='mini'] {
+        border: none;
         border-inline-start-style: solid;
         border-inline-start-width: rem(1px);
+        margin-inline-start: auto;
     }
 }
 
-:host(:not([open])[position='start']),
-:host([dir='rtl']:not([open])[position='end']) {
+:host([position='start']),
+:host([dir='rtl'][position='end']) {
     --dir: #{direction($rtl: true)};
 }
 
-:host(:not([open])[position='end']),
-:host([dir='rtl']:not([open])[position='start']) {
+:host([position='end']),
+:host([dir='rtl'][position='start']) {
     --dir: #{direction($rtl: false)};
 }
 
-:host(:not([open])[position='relative']) {
+:host([position='top']),
+:host([position='bottom']) {
     [part='base'] {
-        margin-inline-start: calc(var(--menu-full-width) * -1);
-        opacity: 1;
-        overflow: hidden;
+        height: var(--menu-height);
+        min-height: initial;
+        min-width: 100vw;
+        margin: revert;
     }
 
-    [part='main'] {
-        opacity: 0;
+    [part='mini'] {
+        display: none;
+        transition: none;
     }
 }
 
-:host(:not([open])[position='top']),
-:host(:not([open])[position='bottom']) {
+:host([position='top']) {
     [part='base'] {
-        translate: 0 -60vh;
+        top: 0;
+        bottom: auto;
+        border: none;
+        border-block-end-style: solid;
+        border-block-end-width: rem(1px);
     }
 
-    [part='mini'] {
-        display: none;
+    [part='base']:not(:open) {
+        translate: 0 calc(var(--menu-height) * -1);
+    }
+
+    [part='base']:open {
+        translate: 0;
+
+        @starting-style {
+            translate: 0 calc(var(--menu-height) * -1);
+        }
     }
 }
 
-:host(:not([open])[position='bottom']) {
+:host([position='bottom']) {
     [part='base'] {
-        translate: 0 60vh;
+        top: auto;
+        bottom: 0;
+        border: none;
+        border-block-start-style: solid;
+        border-block-start-width: rem(1px);
+    }
+
+    [part='base']:not(:open) {
+        translate: 0 var(--menu-height);
+    }
+
+    [part='base']:open {
+        translate: 0;
+
+        @starting-style {
+            translate: 0 var(--menu-height);
+        }
     }
 }
 
-:host([open][position='end']) {
+:host(:where([position='start'], [position='end'])) {
     [part='base'] {
-        border-inline-end: none;
-        border-inline-start-style: solid;
-        border-inline-start-width: rem(1px);
+        border-inline-end-style: solid;
+        border-inline-end-width: rem(1px);
+    }
+
+    [part='base']:not(:open) {
+        translate: calc(200% * var(--dir)) 0;
+
+        + [part~='mini'] {
+            translate: 0;
+
+            @starting-style {
+                translate: calc(200% * var(--dir)) 0;
+            }
+        }
+    }
+
+    [part='base']:open {
+        + [part~='mini'] {
+            translate: calc(200% * var(--dir)) 0;
+        }
+
+        @starting-style {
+            translate: calc(200% * var(--dir)) 0;
+        }
     }
 }
 
-:host([open]) [part='mini'],
-[part='mini hidden'] {
-    display: none;
+@supports not selector(:open) {
+    :host [part='base'] {
+        transition-property: translate, opacity;
+
+        &::backdrop {
+            transition-property: opacity;
+        }
+    }
+
+    :host([open]) [part='base'] {
+        &::backdrop {
+            opacity: 1;
+
+            @starting-style {
+                opacity: 0;
+            }
+        }
+    }
+
+    :host([open][position='top']) {
+        [part='base'] {
+            translate: 0;
+
+            @starting-style {
+                translate: 0 calc(var(--menu-height) * -1);
+            }
+        }
+    }
+
+    :host(:not([open])[position='top']) {
+        [part='base'] {
+            translate: 0 calc(var(--menu-height) * -1);
+        }
+    }
+
+    :host([open][position='bottom']) {
+        [part='base'] {
+            translate: 0;
+
+            @starting-style {
+                translate: 0 var(--menu-height);
+            }
+        }
+    }
+
+    :host(:not([open])[position='bottom']) {
+        [part='base'] {
+            translate: 0 var(--menu-height);
+        }
+    }
+
+    :host([open]:where([position='start'], [position='end'])) {
+        [part='base'] {
+            @starting-style {
+                translate: calc(200% * var(--dir)) 0;
+            }
+        }
+    }
+
+    :host(:not([open]):where([position='start'], [position='end'])) {
+        [part='base'] {
+            translate: calc(200% * var(--dir)) 0;
+        }
+    }
 }
 
-:host([open]:not([position='relative'])) {
+:host([position='relative']) {
     [part='base'] {
+        position: relative;
+        box-shadow: none;
+        transition: margin var(--transition-duration) var(--transition-function);
+    }
+
+    [part='base']:has(~ [part~='hidden']) {
         border-inline-end-style: solid;
         border-inline-end-width: rem(1px);
     }
+
+    [part='mini'] {
+        position: relative;
+        transition:
+            width var(--transition-duration) var(--transition-function) 50ms,
+            min-width var(--transition-duration) var(--transition-function) 50ms,
+            padding var(--transition-duration) var(--transition-function) 50ms;
+        border-inline-end-width: rem(1px);
+        border-inline-end-style: solid;
+    }
 }
 
-:host(:not([open])) {
+:host(:not([open])[position='relative']) {
     [part='base'] {
-        translate: calc(100% * var(--dir)) 0;
-        opacity: 0;
+        margin-inline-start: calc(var(--menu-full-width) * -1);
+        overflow: hidden;
+    }
+}
+
+:host([open][position='relative']) {
+    [part='base'] {
+        transition-delay: 50ms;
     }
 
-    [part='overlay'] {
-        pointer-events: none;
-        opacity: 0;
+    [part='mini'] {
+        width: 0;
+        min-width: 0;
+        padding-inline: 0;
     }
 }
diff --git a/src/components/nav-drawer/themes/shared/container/nav-drawer.common.scss b/src/components/nav-drawer/themes/shared/container/nav-drawer.common.scss
index b50db8a58..9ed388f64 100644
--- a/src/components/nav-drawer/themes/shared/container/nav-drawer.common.scss
+++ b/src/components/nav-drawer/themes/shared/container/nav-drawer.common.scss
@@ -4,43 +4,41 @@
 $theme: $material;
 $background: var-get($theme, 'background') !default;
 
-[part='overlay'] {
-    background: var-get($overlay-material, 'background-color');
-}
-
-[part='base'] {
-    border-radius: var-get($theme, 'border-radius');
-    background: $background;
-}
+:host {
+    [part='base'] {
+        background: $background;
+        border-color: var-get($theme, 'border-color');
 
-[part='mini'] {
-    background: $background;
-}
+        &::backdrop {
+            background: var-get($overlay-material, 'background-color');
+        }
+    }
 
-:host([position='start']) [part='mini'],
-:host([position='end']) [part='mini'] {
-    box-shadow: var-get($theme, 'elevation');
+    [part='mini'] {
+        background: $background;
+        border-color: var-get($theme, 'border-color');
+    }
 }
 
-:host([position='start']) [part~='base'],
-:host([position='start']) [part~='mini'] {
-    border-inline-end-color: var-get($theme, 'border-color');
-}
+:host(:is([position='start'], [position='end'])) {
+    [part='base'],
+    [part='mini'] {
+        border-inline-color: var-get($theme, 'border-color');
+    }
 
-:host([position='end']) [part~='base'],
-:host([position='end']) [part~='mini'] {
-    border-inline-start-color: var-get($theme, 'border-color');
+    [part='mini'] {
+        box-shadow: var-get($theme, 'elevation');
+    }
 }
 
-:host([position='relative']) {
-    [part~='base'],
-    [part~='mini'] {
-        border-inline-end-color: var-get($theme, 'border-color');
+:host(:is([position='top'], [position='bottom'])) {
+    [part='base'] {
+        border-block-color: var-get($theme, 'border-color');
     }
 }
 
-:host([open]:not([position='relative'])) {
-    [part='base'] {
+:host(:not([position='relative'])) {
+    [part='base']:open {
         box-shadow: var-get($theme, 'elevation');
     }
 }
diff --git a/src/components/nav-drawer/themes/shared/container/nav-drawer.fluent.scss b/src/components/nav-drawer/themes/shared/container/nav-drawer.fluent.scss
index 4c9436236..d94ff249e 100644
--- a/src/components/nav-drawer/themes/shared/container/nav-drawer.fluent.scss
+++ b/src/components/nav-drawer/themes/shared/container/nav-drawer.fluent.scss
@@ -6,8 +6,3 @@ $theme: $fluent;
 :host {
     --menu-mini-width: #{rem(40px)};
 }
-
-[part='base'],
-[part~='mini'] {
-    border: rem(1px) solid var-get($theme, 'border-color');
-}
diff --git a/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss b/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss
index 03491e247..d733fd542 100644
--- a/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss
+++ b/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss
@@ -6,7 +6,7 @@ $theme: $indigo;
 :host {
     --menu-mini-width: #{rem(48px)};
 
-    [part='overlay'] {
+    [part='base']::backdrop {
         background: var-get($overlay-indigo, 'background-color');
     }
 
diff --git a/src/index.ts b/src/index.ts
index 94c52e11e..305e6cb66 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -146,6 +146,7 @@ export type { IgcDropdownComponentEventMap } from './components/dropdown/dropdow
 export type { IgcExpansionPanelComponentEventMap } from './components/expansion-panel/expansion-panel.js';
 export type { IgcInputComponentEventMap } from './components/input/input-base.js';
 export type { IgcInputComponentEventMap as IgcMaskInputComponentEventMap } from './components/input/input-base.js';
+export type { IgcNavDrawerComponentEventMap } from './components/nav-drawer/nav-drawer.js';
 export type { IgcFileInputComponentEventMap } from './components/file-input/file-input.js';
 export type { IgcRadioComponentEventMap } from './components/radio/radio.js';
 export type { IgcRatingComponentEventMap } from './components/rating/rating.js';
diff --git a/stories/nav-drawer.stories.ts b/stories/nav-drawer.stories.ts
index 161df0ad9..223f1d516 100644
--- a/stories/nav-drawer.stories.ts
+++ b/stories/nav-drawer.stories.ts
@@ -10,6 +10,7 @@ import {
   registerIcon,
 } from 'igniteui-webcomponents';
 import { range } from 'lit/directives/range.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 defineComponents(IgcIconComponent, IgcNavDrawerComponent, IgcButtonComponent);
 
@@ -21,35 +22,75 @@ const metadata: Meta<IgcNavDrawerComponent> = {
     docs: {
       description: {
         component:
-          'Represents a side navigation container that provides\nquick access between views.',
+          'A side navigation container that provides\nquick access between views within an application.\n\n\nWhen content is provided in the `mini` slot, a compact icon-only variant is\ndisplayed alongside the main drawer.',
       },
     },
+    actions: { handles: ['igcClosing', 'igcClosed'] },
   },
   argTypes: {
     position: {
       type: '"start" | "end" | "top" | "bottom" | "relative"',
-      description: 'The position of the drawer.',
+      description:
+        'Sets the position of the drawer.\n\n- `start` — anchored to the inline-start edge (default).\n- `end` — anchored to the inline-end edge.\n- `top` — anchored to the block-start edge.\n- `bottom` — anchored to the block-end edge.\n- `relative` — rendered inline within the page flow; no modal backdrop.',
       options: ['start', 'end', 'top', 'bottom', 'relative'],
       control: { type: 'select' },
       table: { defaultValue: { summary: 'start' } },
     },
     open: {
       type: 'boolean',
-      description: 'Determines whether the drawer is opened.',
+      description: 'Whether the drawer is open.',
       control: 'boolean',
       table: { defaultValue: { summary: 'false' } },
     },
+    keepOpenOnEscape: {
+      type: 'boolean',
+      description:
+        'Determines whether the drawer should remain open when the Escape key is pressed.\n\nThis attribute is only applicable when the drawer is in a non-relative position,\nas the Escape key does not trigger the closing of relative drawers.',
+      control: 'boolean',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    label: {
+      type: 'string',
+      description:
+        'Sets an accessible label for the drawer.\n\nIn non-relative positions this label is applied to the modal `<dialog>` element.\nIn `relative` position it labels the `<nav>` landmark.\n\nWhen multiple navigation landmarks exist on the page each should receive a\ndistinct label so screen-reader users can differentiate between them.',
+      control: 'text',
+    },
   },
-  args: { position: 'start', open: false },
+  args: { position: 'start', open: false, keepOpenOnEscape: false },
 };
 
 export default metadata;
 
 interface IgcNavDrawerArgs {
-  /** The position of the drawer. */
+  /**
+   * 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' | 'end' | 'top' | 'bottom' | 'relative';
-  /** Determines whether the drawer is opened. */
+  /** Whether the drawer is open. */
   open: boolean;
+  /**
+   * 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;
+  /**
+   * 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;
 }
 type Story = StoryObj<IgcNavDrawerArgs>;
 
@@ -133,7 +174,7 @@ const createDrawerContent = (headerText: string, itemCount = 15) => html`
     (i) => html`
       <igc-nav-drawer-item>
         <igc-icon slot="icon" name="home"></igc-icon>
-        <span slot="content">Navbar item ${i + 1}</span>
+        <span tabindex="0" slot="content">Drawer item ${i + 1}</span>
       </igc-nav-drawer-item>
     `
   )}
@@ -175,11 +216,21 @@ const createTemplate = (options: {
   includeMini?: boolean;
   contentText?: string;
 }) => {
-  return ({ open = false, position }: IgcNavDrawerArgs) => html`
+  return ({
+    open = false,
+    position,
+    keepOpenOnEscape = false,
+  }: IgcNavDrawerArgs) => html`
     ${commonStyles}
 
     <div class="ig-scrollbar main">
-      <igc-nav-drawer .open=${open} .position=${position} @click=${handleClick}>
+      <igc-nav-drawer
+        label=${ifDefined(options.headerText ?? undefined)}
+        .open=${open}
+        .position=${position}
+        ?keep-open-on-escape=${keepOpenOnEscape}
+        @click=${handleClick}
+      >
         ${createDrawerContent(
           options.headerText || 'Sample Drawer',
           options.itemCount