previously Vue Storefront Build Better Storefronts

Drawer

SfDrawer is a container that can be anchored to the left, right, top or bottom edge of the screen. This can be used to create things like navigation drawers, sliding cart views, or anything else that needs to stick to the edge of the screen. It also adds additional functionality like closing when the user clicks outside of the drawer or presses the escape key.

Examples

Basic Usage

SfDrawer supports 4 different placements that can be set via placement prop: top, right, bottom, left.

To open/close the drawer, you can use the the open prop and the onClose event

By default, SfDrawer will trigger the close event when the user clicks outside of the drawer or presses the escape key. These behaviors can be disabled by setting the disableClickAway and disableEsc props to true.

Drawer transition and trap focus

You can wrap SfDrawer in a <CSSTransition> component to add enter/exit animations.

Additionally, you can use the useTrapFocus utility for better control of focusable elements inside.

Accessibility notes

The component is providing keyboard accessibility with @keydown.esc="onEscKeyDown" and onClickOutside function which allows users to close the drawer by pressing the Escape key or click outside of the drawer.

Playground