{"id":39486293,"url":"https://github.com/vtex-apps/overlay-layout","last_synced_at":"2026-01-18T05:26:14.092Z","repository":{"id":69224371,"uuid":"235410270","full_name":"vtex-apps/overlay-layout","owner":"vtex-apps","description":"The Overlay Layout app provides blocks that help you create a Dropdown, Select or a Tooltip component.","archived":false,"fork":false,"pushed_at":"2025-04-09T20:45:01.000Z","size":593,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":40,"default_branch":"master","last_synced_at":"2025-04-09T21:38:09.004Z","etag":null,"topics":["hacktoberfest","store-framework","vtex-io"],"latest_commit_sha":null,"homepage":"","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":"2020-01-21T18:16:37.000Z","updated_at":"2025-04-09T20:45:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"f0f5b440-6d67-41af-9811-3800c95adcc0","html_url":"https://github.com/vtex-apps/overlay-layout","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":"vtex-apps/react-app-template","purl":"pkg:github/vtex-apps/overlay-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Foverlay-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Foverlay-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Foverlay-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Foverlay-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/overlay-layout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Foverlay-layout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530810,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","store-framework","vtex-io"],"created_at":"2026-01-18T05:26:13.593Z","updated_at":"2026-01-18T05:26:14.080Z","avatar_url":"https://github.com/vtex-apps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"📢 Use this project, [contribute](https://github.com/vtex-apps/overlay-layout) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).\n\n# Overlay Layout\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-0-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\nThe Overlay Layout app provides blocks that help you create a Dropdown, Select or a Tooltip component.\n\n![overlay-layout](https://user-images.githubusercontent.com/52087100/78159134-881f2100-7418-11ea-94e1-d70343cd021f.gif)\n\n*Example of a [Locale Switcher](https://vtex.io/docs/components/all/vtex.locale-switcher@0.5.5) using the Overlay Layout*. \n\n## Configuration\n\n1. Add the Overlay Layout app to your theme's dependencies in the `manifest.json`, for example:\n\n```jsonc\n{\n  \"dependencies\": {\n    \"vtex.overlay-layout\": \"0.x\"\n  }\n}\n```\n\nNow you can use the two blocks exported by the app: \n\nBlock name | Description |\n| --------------------| -------- |\n| `overlay-trigger` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Declares a renderable children block responsible for triggering the `overlay-layout` content. |\n| `overlay-layout` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Declares a renderable children block responsible for building the   |\n\n2.  In any desired theme template, add the `overlay-trigger` and then declare it using a block of your choosing and the `overlay-layout`:\n\n```jsonc\n{\n  \"overlay-trigger\": {\n    \"children\": [\n      \"rich-text#question\",\n      \"overlay-layout\"    \n    ]\n  },\n```\n\n*Notice that the* `overlay-trigger` i*s not rendered. Following the example stated above, the* `rich-text` *block will be the one rendered and responsible for effectively triggering the Overlay Layout content (defined by the children block of* `overlay-layout`*).*\n\n### `overlay-trigger` props\n\n| Prop name | Type | Description | Default value |\n| --- | --- | --- | --- |\n| `trigger` | `Enum` | Defines whether the `popover-layout` will be opened by click (`click`) or hover (`hover`).| `click` |\n\n3. Configure the chosen trigger [block](https://vtex.io/docs/apps/all) and declare the `overlay-layout` using its props. For example:\n\n```jsonc\n  \"rich-text#question\": {\n    \"props\": {\n      \"text\": \"**Click to open the Overlay Layout**\",\n      \"blockClass\": \"question\"\n    }\n  },\n  \"overlay-layout\": {\n    \"props\": {\n      \"placement\": \"left\"\n    },\n    \"children\": [\n      \"rich-text#link\"\n    ]\n  },\n  \"rich-text#link\": {\n    \"props\": {\n      \"text\": \"\\n**Reach us at**\\nwww.vtex.com.br\",\n      \"blockClass\": \"link\"\n    }\n  }\n}\n```\n\n*The* `overlay-layout` *defines which block will be rendered in order to build the Overlay Layout content. This means that you will have to pass to it a children block to be rendered.* \n\n### `overlay-layout` props\n\n| Prop name | Type | Description | Default value |\n| --- | --- | --- | --- |\n| `placement` | `Enum` | Defines the Overlay Layout content placement when it is triggered according to the Trigger component positioning. Possible values are: `bottom`, `left`, `right` or `top`.  If there is no page space in the placement that you choose, it will fit in a fallback position. | `bottom` |\n| `scrollBehavior` | `Enum` | Defines the Overlay Layout content behavior when users try to scroll the page. Possible values are: `lock-page-scroll` (in which users can't scroll), `close-on-scroll` (the block is closed when users start scrolling) or `default` (Scroll does not affect the Overlay Layout content). | `default` |\n| `backdrop` | `Enum` | Once the Overlay Layout content is rendered, it defines whether a backdrop overlay will be displayed (`visible`) or not (`none`). When set as `visible`, the backdrop will close Overlay Layout content when clicked on. Otherwise, the content will be closed only if any component from the page is clicked on. | `none` |\n| `showArrow`  | `Boolean` | Whether an arrow pointing to the `overlay-trigger` component should be displayed on UI(`true`) or not (`false`). | `false` |\n| `offsets` | `Object` | Defines the `overlay-layout` component positioning when compared to the `overlay-trigger` (unit used is `px`). For more details, check out the `offsets` object table stated below. | `{ skidding: 0, distance: 0 }` |\n\n- **`offsets` object:**\n\n| Prop | Type | Description |\n| --- | --- | --- |\n| `skidding` | `Number` | Defines the `overlay-layout` component positioning side by side with the `overlay-trigger`. |\n| `distance` | `Number` | Defines the distance between the `overlay-layout` and the `overlay-trigger` components in the UI. A positive number places the `overlay-layout` component farther, while a negative number lets it overlap the `overlay-trigger`. |\n\n## Customization\n\nIn order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).\n\n| CSS Handles |\n| --- |\n| `arrow` |\n| `container` |\n| `outsideClickHandler` |\n| `paper` |\n| `popper` |\n| `popperArrow` |\n| `trigger` |\n\n## Contributors ✨\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\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Foverlay-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Foverlay-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Foverlay-layout/lists"}