averouiComponent playgroundv0.0.1
Components / Overlay /Drawer

Drawer

New

A little more room for your next idea. Slide details, navigation and actions into view.

Four edgesFull screenCustom templates

Basic

Control visibility with a two-way binding. Click outside or press Escape to close.

YOUR WORKSPACE

Make room for what matters.

Everything you need, just a slide away.

Your workspace

Keep your ideas, notes and next steps together.

Your note stays here when you close and reopen the drawer.

Ready when you are.

Position

Choose the edge that fits your layout.

Right where you need it

Opened from the left edge.

Use the close button, Escape or the backdrop to return.

Size and scrolling

Set width for side drawers and height for top or bottom drawers. Breakpoints adjust the width on smaller screens.

Workspace guide

1. A shared purpose

Start with a clear intention and share your progress with the team. Keep your notes close and leave space for a fresh perspective.

Review the details together, collect feedback and choose a small next step. Useful habits make everyday work easier.

2. Room to explore

Start with a clear intention and share your progress with the team. Keep your notes close and leave space for a fresh perspective.

Review the details together, collect feedback and choose a small next step. Useful habits make everyday work easier.

3. Thoughtful details

Start with a clear intention and share your progress with the team. Keep your notes close and leave space for a fresh perspective.

Review the details together, collect feedback and choose a small next step. Useful habits make everyday work easier.

4. Next steps

Start with a clear intention and share your progress with the team. Keep your notes close and leave space for a fresh perspective.

Review the details together, collect feedback and choose a small next step. Useful habits make everyday work easier.

Full screen

Use position="full" when your content needs the whole viewport.

Project brief

THE NEXT CHAPTER

Good ideas start with a little space.

A shared workspace for thoughtful decisions, clear priorities and meaningful progress.

Template

Customize the header, content and footer independently.

Design workspace
BETTER TOGETHER

A place for your next idea.

12 projects. 4 collaborators. A little room to grow.

Headless

Replace the entire layout and use the provided close callback.

Your next chapter.

Bring your curiosity. Your workspace is ready.

Non-modal

Keep the page interactive while a companion panel is open.

A handy companion

Browse the page while keeping these details nearby. Focus this panel and press Escape to close.

Usage and API

TypeScript
import { signal } from '@angular/core';
import { AvDrawer, AvButton } from 'avero-ui';

// Add AvDrawer and AvButton to your component imports.
readonly visible = signal(false);
HTML
<button avButton (click)="visible.set(true)"
  aria-controls="workspace-drawer" [attr.aria-expanded]="visible()">Open</button>
<av-drawer inputId="workspace-drawer" header="Workspace"
  [(visible)]="visible" position="right" width="480px"
  [breakpoints]="{ '640px': '100vw' }">
  <p>Your content goes here.</p>
  <ng-template #footer let-close="close">
    <button avButton (click)="close()">Done</button>
  </ng-template>
</av-drawer>
Inputs. visible supports two-way binding. Configure inputId, header, ariaLabel, position (left by default), width and height (320px), breakpoints, modal, closable, closeOnEscape and dismissableMask (all true by default). Breakpoints use maximum viewport widths in px; the narrowest match wins.
Templates and events. Use #header, #content, #footer or #headless. Content, footer and headless templates receive a close callback. onShow and onHide report visibility changes; close() dismisses the drawer programmatically.
Accessibility. Native modal dialogs contain keyboard focus and restore it to the trigger on close. Provide header or ariaLabel, and connect your trigger with aria-controls and aria-expanded. Use data-default-focus to choose initial focus. Entry animations respect reduced motion preferences.
Styling. Customize --av-drawer-background, --av-drawer-color, --av-drawer-border, --av-drawer-padding and --av-drawer-mask.
Avero UI Designed to fit your application.