Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Advanced components
Store Drawer
Official extension
Version: 0.9.0
Latest version: 0.18.3

This page is about version 0.9.0 of the app, which is not the most recent version. The latest stable version is 0.18.3.

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

Basic Usage

To configure or customize this app, you need to import it in your dependencies in your manifest.json file.


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

Then, you need to add the drawer block into your app. The following is an example taken from 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
},

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:


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

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:


_14
// inside 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
}

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:


_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
)

Configuration

The Drawer component 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'

The DrawerCloseButton 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'

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

  • Add the styles builder to your manifest.json:

_10
"builders": {
_10
"styles": "1.x"
_10
}

  • Create a file called vtex.store-drawer.css inside the styles/css folder and add your custom using regular CSS.

CSS Namespaces

Below, we describe the namespaces that are defined in the store-drawer.

Token nameDescription
drawerThe main container of the Drawer component.
drawerHeaderThe container of the DrawerHeader component.
openIconContainerThe container of icon that opens the Drawer when clicked.
closeIconContainerThe container of icon that closes the Drawer when clicked.
closeIconButtonThe button around of the icon that closes the Drawer when clicked.
childrenContainerThe container of children blocks passed to Drawer.
See also
VTEX App Store
VTEX IO Apps