Also known as

Flyout, Sheet, Side panel
Available since

Drawer is an expandable panel that displays content and controls over the application content. It provides temporary access to additional or related content without navigating away from the current screen.

Drawers are always modal. When open, the drawer displays a visual overlay, a scrim component, over the underlying content.

Always set a logical width suitable for the content inside the drawer. Refer to Salt's Forms pattern for information on logical forms width, and the typography foundation for guidance on paragraph text width.

  • To reveal additional functionality or information contextual to on-screen content which the user can close when not required.
  • To display additional relevant functionality or information, such as a form or sidebar navigation, in a specific area of the screen.
  • To allow the user to show and hide additional relevant content.
  • To provide an inlaid drawer that opens in-line with content. Instead, use BorderLayout.
  • To provide a docked drawer that's fixed in the application layout and always visible. Instead, use Panel with styles to expand and collapse a non-modal surface.

To import Drawer and related components from the core Salt package, use: