CngxBackdrop

Manages backdrop overlay behavior: visibility, click-to-close, and inert toggling on sibling elements.

When visible, all sibling elements of the host receive the inert attribute, preventing focus and interaction behind the backdrop. This is critical for a11y in modal/drawer overlays.

The directive is purely behavioral - it toggles the .cngx-backdrop--visible class and aria-hidden attribute. Visual styling is opt-in: either consume the shipped default stylesheet or provide your own.

Drawer backdrop with shipped defaults (recommended)#

<div cngxDrawer #drawer="cngxDrawer">
  <div [cngxBackdrop]="drawer.opened()" (backdropClick)="drawer.close()"
       class="cngx-backdrop"></div>
  <nav [cngxDrawerPanel]="drawer">…</nav>
  <main [cngxDrawerContent]="drawer">…</main>
</div>

@import '@cngx/common/theming/components/cngx-backdrop.css';

Token surface (Three-Tier-Override):

• --cngx-backdrop-bg (scrim color, default oklch(0 0 0 / 0.5))
• --cngx-backdrop-transition-duration (default 200ms)

Custom styling (no opt-in class)#

If the shipped defaults don't fit, omit the .cngx-backdrop class and style your own host class - the directive still toggles .cngx-backdrop--visible on the host element.

<div [cngxBackdrop]="visible()" class="my-backdrop"></div>

.my-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.my-backdrop.cngx-backdrop--visible {
  opacity: 1;
  pointer-events: auto;
}

https://cngxjs.github.io/cngx/examples/#/common/layout/backdrop/overlay-with-inert