Free
Pro

Drawer

Base UI (Angular) drawer is a slide-in panel from any edge. Register provideAnimationsAsync() or open throws NG05105. Copy drawer in, set position and size, and emit closed from links so the overlay detaches on navigate. It is extra context, not the main page.

When to use

  • Filters, nav on small screens, and inspect-record side panels.
  • When the underlying page should stay mounted behind the overlay.

When not to use

  • Blocking tasks that need a focus-trapped modal — use dialog.
  • The primary layout rail — use sidenav or shell.

Install with npx base-ui-cli add drawer.

free

Use <base-drawer #myDrawer position="left"></base-drawer> to add a drawer to any page you want. Name it with identifier by your choice and use position="" to define position of the drawer. Supported positions are "left", "right", "top" and "bottom".

Use close=""with boolean "true" or "false" to control whether the drawer to be with button close or without it..

Left Drawer

Click button below to show the Left Drawer example


HTML

Right Drawer

Click button below to show the Right Drawer example


HTML

Top Drawer

Click button below to show the Top Drawer example


HTML

Bottom Drawer

Click button below to show the Bottom Drawer example


HTML

Drawer Size

Use size="" to define the Drawer size. Supported sizes are "sm", "md", "lg" and "xl". If size is not defined it will take automatic width of the content inside


HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add drawer

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add drawer
// Paths are relative to aliases.components (default: src/app/components)
import { DrawerPanel } from './drawer/drawer-panel';
import { DrawerComponent } from './drawer/drawer.component';
import { DrawerDirective } from './drawer/drawer.directive';

@Component({
  selector: 'app-your-component',
  imports: [
    DrawerComponent,
    DrawerDirective
  ],
  template: `...`
})
export class YourComponent {}

API for drawer — generated from JSDoc in the library source.

API reference for drawer
APIMemberTypeDefaultDescription
DrawerPaneltemplateRefSignal<TemplateRef<T>> — —
DrawerPanelclosedOutputEmitterRef<void> — —
base-drawersizeDrawerSize'md'The size of the drawer. Defaults to 'md'.
base-drawerpositionDrawerPosition'right'The edge of the screen to slide in from. Defaults to 'right'.
base-drawerclosebooleanfalseTriggers the closing animation when set to true.
base-drawerdrawerLabelunknown'Drawer'Accessible name for the drawer dialog.
base-drawer(closed)void — Event emitted when the drawer has fully closed.
[base-drawer]placementunknown'right'The edge of the screen to slide the drawer in from.
[base-drawer]base-drawerDrawerPanel<T>(required)The reference to the `base-drawer` component to open.