Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Advanced components
Drawer
Official extension
Version: 0.17.1
Latest version: 0.17.1

{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square"}}

The Drawer component is a sliding panel that displays additional options and menus when expanded. It is typically used in mobile layouts and responsive web designs where screen space is limited.

{"base64":"  ","img":{"width":640,"height":1155,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1858982,"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/60782333/245488096-46358b77-e41a-4014-8443-c65cbe947fc2.gif?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20240318%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240318T184813Z&X-Amz-Expires=300&X-Amz-Signature=aef8f3d9bc4682c1a036f3e55dfe3957445b6b63ce81544c7d67acad9a9ef89a&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=203219365"}}

When closed, the Drawer component is represented by an icon button positioned at the edge of the screen. Upon interaction, the drawer slides into view, revealing its content. Users can interact with the exposed content, perform actions, and navigate menus. To dismiss the drawer, users can either tap outside the drawer or use the close button.

Configuration

  1. Open your store theme in the code editor of your preference.
  2. Open the manifest.json file and add the vtex.store-drawer app to your store theme dependencies as in the following:

_10
"dependencies": {
_10
"vtex.store-drawer": "0.x"
_10
}

  1. Add the drawer block to your app. The following example is from the Store Theme.

_16
"drawer": {
_16
"children": [
_16
"menu#drawer"
_16
]
_16
},
_16
_16
"menu#drawer": {
_16
"children": [
_16
"menu-item#category-clothing",
_16
"menu-item#category-decoration",
_16
"menu-item#custom-sale"
_16
],
_16
"props": {
_16
"orientation": "vertical"
_16
}
_16
},

  1. Use the drawer-trigger block to customize the icon that triggers the opening of the drawer as follows:

_27
"drawer": {
_27
"children": [
_27
"menu#drawer"
_27
],
_27
"blocks": ["drawer-trigger"]
_27
},
_27
_27
"drawer-trigger": {
_27
"children": ["rich-text#open-drawer"]
_27
},
_27
_27
"rich-text#open-drawer": {
_27
"props": {
_27
"text": "Open drawer"
_27
}
_27
}
_27
_27
"menu#drawer": {
_27
"children": [
_27
"menu-item#category-clothing",
_27
"menu-item#category-decoration",
_27
"menu-item#custom-sale"
_27
],
_27
"props": {
_27
"orientation": "vertical"
_27
}
_27
},

  1. Use the drawer-header block to customize the header containing the button that closes the drawer. For example:

_14
// blocks.json
_14
{
_14
"drawer": {
_14
"blocks": ["drawer-header#my-drawer"]
_14
},
_14
"drawer-header#my-drawer": {
_14
"children": [
_14
// you need to include the block `drawer-close-button` somewhere inside here
_14
"flex-layout.row#something",
_14
// ...
_14
"drawer-close-button"
_14
]
_14
}
_14
}

Using the Drawer as a standalone component

If you are using this component as a standalone module, you will need to import it into the specific component where you want to use it. For example:


_20
import { Drawer, DrawerHeader, DrawerCloseButton } from "vtex.store-drawer";
_20
_20
const Menu = () => (
_20
<Drawer
_20
header={
_20
<DrawerHeader>
_20
<DrawerCloseButton />
_20
</DrawerHeader>
_20
}
_20
>
_20
<ul>
_20
<li>Link 1</li>
_20
<li>Link 2</li>
_20
<li>Link 3</li>
_20
<li>Link 4</li>
_20
<li>Link 5</li>
_20
<li>Link 6</li>
_20
</ul>
_20
</Drawer>
_20
);

Props

drawer

Prop nameTypeDescriptionDefault value
maxWidthnumber or stringDefines the maximum width of the open drawer.450
isFullWidthbooleanControls whether the open drawer should occupy the full available width.false
slideDirection'horizontal'|'vertical'|'rightToLeft'|'leftToRight'Controls the direction of the opening animation for the drawer.'horizontal'
backdropMode'default'|'none'Controls whether the backdrop should be displayed when the drawer is open.
renderingStrategy'lazy'|'eager'Controls the rendering strategy for the children of the drawer component. It determines whether the children should be rendered only when the drawer is clicked (lazy) or immediately when the page loads (eager). Enabling the eager strategy may improve SEO performance. However, it may also result in slower page rendering.'lazy'
customPixelEventIdstringDefines the store event ID responsible for triggering the drawer to automatically open on the interface.undefined
customPixelEventNamestringDefines the store event name responsible for triggering the drawer to automatically open on the interface. Some examples are: 'addToCart' and 'removeFromCart' events. Note that if no customPixelEventId is set, using this prop will cause the drawer to open in every event with the specified name.undefined

drawer-close-button

Prop nameTypeDescriptionDefault value
sizenumberDefines the size of the icon inside the button.30
type'filled'|'line'Defines the type of the icon.'line'
textstringDefines the text inside the button. The icon will not be rendered if text is defined.undefined

drawer-trigger

Prop nameTypeDescriptionDefault value
customPixelEventIdstringDefines the event ID to be sent whenever users interact with the Drawer component.undefined

Customization

In order to apply CSS customizations to this and other blocks, follow the instructions in Using CSS handles for store customizations.

CSS handles
drawer
opened
overlay
overlay--visible
closed
moving
drawerContent
drawerHeader
drawerTriggerContainer
openIconContainer
closeIconContainer
closeIconButton
childrenContainer
See also
VTEX App Store
VTEX IO Apps