8
Components

Drawer

A fully customizable and accessible drawer component for modern, responsive designs.

Introduction

The Drawer component is a versatile sliding panel for mobile and web applications. It can serve as a simple overlay or a bottom-drawer for mobile-friendly designs.


Default Use Case: Simple Drawer


Installation

Install the Drawer component using the following command:

npx axionjs-ui add drawer

File Structure

drawer.tsx

Prop Types

PropTypeDefault
aria-label
string
-
aria-labelledby
string
-
announcePosition
boolean
false
open
boolean
-
onOpenChange
(open: boolean) => void
-

Features

  • Customizable Positions:
    • Display drawers as simple overlays or bottom drawers for mobile screens.
  • Accessible:
    • Fully ARIA-compliant with support for aria-label and aria-labelledby.
  • Keyboard Support:
    • Fully navigable with keyboard inputs.
  • Flexible Content:
    • Supports headers, descriptions, and customizable footers.

Accessibility

The Drawer component is designed to meet the highest accessibility standards:

  • ARIA Roles:
    • Uses role="dialog" for screen reader support.
  • Screen Reader Announcements:
    • Optionally announce the position of the drawer.
  • Keyboard Navigation:
    • Navigate the drawer using Tab, Escape, and focusable controls.

Conclusion

The Drawer component is a modern, responsive, and accessible solution for creating sliding panels. With built-in keyboard navigation and flexible content options, it is perfect for any web or mobile application.

On this page