UI Component Lab 日本語

← All components

Overlay

Drawer

A panel that slides in from the edge of the screen, over the page.

Filters

Also known as

How to recognize it

A tall panel along the left or right edge (sometimes the top or bottom), with the rest of the page dimmed behind it.

Behavior

  • Opened from a button, often a menu or filter icon.
  • While open, the page behind cannot be used; Esc or the close button closes it and focus returns to the button.
  • Used for navigation menus, filters, or a shopping cart.
  • This demo is a native modal <dialog> styled to sit at the right edge.

Keyboard

KeyAction
Enter / SpaceOpens the drawer from the button.
Tab / Shift + TabMoves between the controls inside the drawer.
EscCloses the drawer and returns focus to the button.

Usage notes

  • Open it from a trigger such as a menu button, cover the page with an overlay, and include a close button.
  • Modal (Dialog): A drawer slides in from an edge and is often tall; a modal dialog appears in the middle of the screen.

Sources