{"id":39487964,"url":"https://github.com/vtex-apps/drawer","last_synced_at":"2026-01-20T17:14:02.235Z","repository":{"id":36796823,"uuid":"178471573","full_name":"vtex-apps/drawer","owner":"vtex-apps","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-28T16:58:03.000Z","size":615,"stargazers_count":0,"open_issues_count":8,"forks_count":13,"subscribers_count":42,"default_branch":"master","last_synced_at":"2026-01-18T15:04:06.305Z","etag":null,"topics":["hacktoberfest","srv-store-framework","store-framework","vtex-io","xp-developer"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vtex-apps.png","metadata":{"files":{"readme":"docs/README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-29T20:29:10.000Z","updated_at":"2025-07-28T16:58:07.000Z","dependencies_parsed_at":"2024-01-09T19:45:28.016Z","dependency_job_id":"90920fff-e360-4ad5-9d6f-81708caf2604","html_url":"https://github.com/vtex-apps/drawer","commit_stats":null,"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/drawer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fdrawer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fdrawer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fdrawer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fdrawer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/drawer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fdrawer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28607625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T16:10:39.856Z","status":"ssl_error","status_checked_at":"2026-01-20T16:10:39.493Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","srv-store-framework","store-framework","vtex-io","xp-developer"],"created_at":"2026-01-18T05:29:28.546Z","updated_at":"2026-01-20T17:14:02.203Z","avatar_url":"https://github.com/vtex-apps.png","language":"TypeScript","readme":"📢 Use this project, [contribute](https://github.com/vtex-apps/drawer) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).\n\n# Drawer\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\nThe **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.\n\n![drawer](https://github.com/vtex-apps/reviews-and-ratings/assets/60782333/46358b77-e41a-4014-8443-c65cbe947fc2)\n\nWhen 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.\n\n## Configuration\n\n1. Open your store theme in the code editor of your preference.\n2. Open the `manifest.json` file and add the `vtex.store-drawer` app to your store theme dependencies as in the following:\n\n```json\n\"dependencies\": {\n  \"vtex.store-drawer\": \"0.x\"\n}\n```\n\n2. Add the `drawer` block to your app. The following example is from the [Store Theme](https://github.com/vtex-apps/store-theme).\n\n```json\n\"drawer\": {\n  \"children\": [\n    \"menu#drawer\"\n  ]\n},\n\n\"menu#drawer\": {\n  \"children\": [\n    \"menu-item#category-clothing\",\n    \"menu-item#category-decoration\",\n    \"menu-item#custom-sale\"\n  ],\n  \"props\": {\n    \"orientation\": \"vertical\"\n  }\n},\n```\n\n3. Use the `drawer-trigger` block to customize the icon that triggers the opening of the drawer as follows:\n\n```json\n\"drawer\": {\n  \"children\": [\n    \"menu#drawer\"\n  ],\n  \"blocks\": [\"drawer-trigger\"]\n},\n\n\"drawer-trigger\": {\n  \"children\": [\"rich-text#open-drawer\"]\n},\n\n\"rich-text#open-drawer\": {\n  \"props\": {\n    \"text\": \"Open drawer\"\n  }\n}\n\n\"menu#drawer\": {\n  \"children\": [\n    \"menu-item#category-clothing\",\n    \"menu-item#category-decoration\",\n    \"menu-item#custom-sale\"\n  ],\n  \"props\": {\n    \"orientation\": \"vertical\"\n  }\n},\n```\n\n4. Use the `drawer-header` block to customize the header containing the button that closes the drawer. For example:\n\n```json\n// blocks.json\n{\n  \"drawer\": {\n    \"blocks\": [\"drawer-header#my-drawer\"]\n  },\n  \"drawer-header#my-drawer\": {\n    \"children\": [\n      // you need to include the block `drawer-close-button` somewhere inside here\n      \"flex-layout.row#something\",\n      // ...\n      \"drawer-close-button\"\n    ]\n  }\n}\n```\n\n### Using the Drawer as a standalone component\n\nIf 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:\n\n```tsx\nimport { Drawer, DrawerHeader, DrawerCloseButton } from \"vtex.store-drawer\";\n\nconst Menu = () =\u003e (\n  \u003cDrawer\n    header={\n      \u003cDrawerHeader\u003e\n        \u003cDrawerCloseButton /\u003e\n      \u003c/DrawerHeader\u003e\n    }\n  \u003e\n    \u003cul\u003e\n      \u003cli\u003eLink 1\u003c/li\u003e\n      \u003cli\u003eLink 2\u003c/li\u003e\n      \u003cli\u003eLink 3\u003c/li\u003e\n      \u003cli\u003eLink 4\u003c/li\u003e\n      \u003cli\u003eLink 5\u003c/li\u003e\n      \u003cli\u003eLink 6\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/Drawer\u003e\n);\n```\n\n### Props\n\n#### `drawer`\n\n| Prop name              | Type                                                                       | Description                                                                                                                                                                                                                                                                                                                              | Default value  |\n| ---------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |\n| `maxWidth`             | `number` or `string`                                                       | Defines the maximum width of the open drawer.                                                                                                                                                                                                                                                                                            | `450`          |\n| `isFullWidth`          | `boolean`                                                                  | Controls whether the open drawer should occupy the full available width.                                                                                                                                                                                                                                                                 | `false`        |\n| `slideDirection`       | `'horizontal'`\u0026#124;`'vertical'`\u0026#124;`'rightToLeft'`\u0026#124;`'leftToRight'` | Controls the direction of the opening animation for the drawer.                                                                                                                                                                                                                                                                          | `'horizontal'` |\n| `backdropMode`         | `'default'`\u0026#124;`'none'`                                                  | Controls whether the backdrop should be displayed when the drawer is open.                                                                                                                                                                                                                                                               |                |\n| `renderingStrategy`    | `'lazy'`\u0026#124;`'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'`       |\n| `customPixelEventId`   | `string`                                                                   | Defines the store event ID responsible for triggering the `drawer` to automatically open on the interface.                                                                                                                                                                                                                                       | `undefined`    |\n| `customPixelEventName` | `string`                                                                   | Defines 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`    |\n\n#### `drawer-close-button`\n\n| Prop name | Type                     | Description                                                                            | Default value |\n| --------- | ------------------------ | -------------------------------------------------------------------------------------- | ------------- |\n| `size`    | `number`                 | Defines the size of the icon inside the button.                                         | `30`          |\n| `type`    | `'filled'`\u0026#124;`'line'` | Defines the type of the icon.                                                           | `'line'`      |\n| `text`    | `string`                 | Defines the text inside the button. The icon will not be rendered if `text` is defined. | `undefined`   |\n\n#### `drawer-trigger`\n\n| Prop name            | Type     | Description                                                                        | Default value |\n| -------------------- | -------- | ---------------------------------------------------------------------------------- | ------------- |\n| `customPixelEventId` | `string` | Defines the event ID to be sent whenever users interact with the Drawer component. | `undefined`   |\n\n## Customization\n\nIn order to apply CSS customizations to this and other blocks, follow the instructions in [Using CSS handles for store customizations](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).\n\n| CSS handles              |\n| ------------------------ |\n| `drawer`                 |\n| `opened`                 |\n| `overlay`                |\n| `overlay--visible`       |\n| `closed`                 |\n| `moving`                 |\n| `drawerContent`          |\n| `drawerHeader`           |\n| `drawerTriggerContainer` |\n| `openIconContainer`      |\n| `closeIconContainer`     |\n| `closeIconButton`        |\n| `childrenContainer`      |\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Radu1749\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/51535501?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRadu1749\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/drawer/commits?author=Radu1749\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/rayra-alencar\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/28907161?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003erayra-alencar\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/drawer/commits?author=rayra-alencar\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/renanguerraa1\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/69531548?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRenan Guerra\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/drawer/commits?author=renanguerraa1\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fdrawer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Fdrawer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fdrawer/lists"}