Store Drawer

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.

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"
  }
},

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 } from 'vtex.store-drawer'

const Menu = () => (
  <Drawer>
    <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 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'

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:
"builders": {
  "styles": "1.x"
}
  • 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.
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.