Components / Drawer

Drawer

A mobile-friendly modal surface anchored to a viewport edge.

example.component.html

html

<aevko-drawer title="Project filters" description="Narrow the visible projects.">
  <button aevkoDrawerTrigger>
    Open filters
  </button>
  <label>
    <input type="checkbox" />
    Active projects
  </label>
  <button aevkoDrawerClose>
    Apply filters
  </button>
</aevko-drawer>

Installation

npx aevko-ui@latest add drawer --yes

Source ownership

Customization

Choose an edge that follows the task and viewport, keep long content scrollable and project native controls without coupling the component to an icon library.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`title / description`	`string`	`required / ''`	Accessible drawer heading and context.
`open`	`model<boolean>`	`false`	Controlled open state.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Viewport edge used by the surface.
`dismissal and focus inputs`	`boolean / CSS selector`	`dialog defaults`	Configures Escape, backdrop, initial focus and restoration.
`aevkoDrawerTrigger / aevkoDrawerClose`	`projected slots`	`empty`	Native opener and close actions.

Accessibility contract

Accessibility

Included behavior

The drawer uses native modal focus containment and restoration while projected controls keep their original semantics.

Your responsibility

Keep projected controls labelled, ensure content remains usable at small viewport heights and do not rely on the visual handle as an action.

Back to all components