VTEX Developer Portal

All ContributorsAll Contributors

This component allows you to have a sliding drawer for your menus. This is specially handy for mobile layouts.

Configuration

Add the app to your theme's dependencies on the manifest.json, for example:

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

Then, you need to add the drawer block into your app. The following is an example taken from Store Theme.

"drawer": {
  "children": [
    "menu#drawer"
  ]
},

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

There is also a block that can be used for customizing the icon that triggers the opening of the drawer, it's called "drawer-trigger" and can be used as follows:

"drawer": {
  "children": [
    "menu#drawer"
  ],
  "blocks": ["drawer-trigger"]
},

"drawer-trigger": {
  "children": ["rich-text#open-drawer"]
},

"rich-text#open-drawer": {
  "text": "Open drawer"
}

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

And there is a block that enables customization of the header that contains the button which closes the drawer.
It's called "drawer-header" and can be used in a similar way as "drawer-trigger", here is an example:

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

If you're using this component by itself, you just need to import it inside the component you want to use it in. Here's an example:

import { Drawer, DrawerHeader, DrawerCloseButton } from 'vtex.store-drawer'

const Menu = () => (
  <Drawer
    header={
      <DrawerHeader>
        <DrawerCloseButton />
      </DrawerHeader>
    }
  >
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>
      <li>Link 6</li>
    </ul>
  </Drawer>
)

Configuration

The drawer block accepts a few props that allow you to customize it.

Prop nameTypeDescriptionDefault value
maxWidthnumber or stringDefine the open Drawer's maximum width.450
isFullWidthBooleanControl whether or not the open Drawer should occupy the full available width.false
slideDirection'horizontal'|'vertical'|'rightToLeft'|'leftToRight'Controls the opening animation's direction.'horizontal'
backdropMode'default'|'none'Controls if it should display the backdrop when the Drawer is open
renderingStrategy'lazy'|'eager'Controls if it should render the children only when clicked (lazy) or as soon as the page loads (eager). Enabling the eager strategy may increase SEO performance, but the page may be rendered slower'lazy'
customPixelEventIdstringStore event ID responsible for triggering the drawer to automatically open itself on the interface.undefined
customPixelEventNamestringStore event name responsible for triggering the drawer to automatically open itself on the interface. Some examples are: 'addToCart' and 'removeFromCart' events. Notice that using this prop will make the drawer open in every event with the specified name if no customPixelEventId is specified.undefined

The drawer-close-button block accepts the following props to customize it:

Prop nameTypeDescriptionDefault value
sizeNumberDefine the size of the icon inside the button30
type'filled'|'line'Define the type of the icon'line'
textStringDefine the text inside the button. If text is defined, the icon will not be rendered.undefined

The drawer-trigger block accepts the following prop to customize it:

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 in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
drawer
opened
overlay
overlay--visible
closed
moving
drawerContent
drawerHeader
drawerTriggerContainer
openIconContainer
closeIconContainer
closeIconButton
childrenContainer

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind are welcome!

Updated 5 months ago


Store Drawer


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.