{"id":46451576,"url":"https://github.com/vtex-apps/store-header","last_synced_at":"2026-03-06T00:32:13.832Z","repository":{"id":42210737,"uuid":"148801966","full_name":"vtex-apps/store-header","owner":"vtex-apps","description":"VTEX Header app for IO Stores","archived":false,"fork":false,"pushed_at":"2025-11-26T17:45:29.000Z","size":931,"stargazers_count":6,"open_issues_count":5,"forks_count":10,"subscribers_count":45,"default_branch":"master","last_synced_at":"2025-11-29T11:49:39.259Z","etag":null,"topics":["hacktoberfest","srv-store-framework","store","store-framework","vtex-io","xp-developer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-09-14T14:44:30.000Z","updated_at":"2025-11-26T17:45:32.000Z","dependencies_parsed_at":"2025-03-31T21:25:14.089Z","dependency_job_id":"23e33ee9-d1c7-4184-a445-2b52c2582bc7","html_url":"https://github.com/vtex-apps/store-header","commit_stats":null,"previous_names":[],"tags_count":103,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/store-header","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fstore-header","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fstore-header/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fstore-header/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fstore-header/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/store-header/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fstore-header/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30156286,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T22:39:40.138Z","status":"ssl_error","status_checked_at":"2026-03-05T22:39:24.771Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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","store-framework","vtex-io","xp-developer"],"created_at":"2026-03-06T00:32:12.842Z","updated_at":"2026-03-06T00:32:13.755Z","avatar_url":"https://github.com/vtex-apps.png","language":"JavaScript","readme":"📢 Use this project, [contribute](https://github.com/vtex-apps/store-header) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Don't 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\n# Header\n\n[\u003ci class=\"fa-brands fa-github\"\u003e\u003c/i\u003e Source code](https://github.com/vtex-apps/store-header)\n\nThe Header app displays a navigation bar at the top of your store pages. It serves as the central hub for essential navigation elements, such as your store [logo](https://developers.vtex.com/docs/apps/vtex.store-components/logo), the [minicart](https://developers.vtex.com/docs/apps/vtex.minicart), user [login](https://developers.vtex.com/docs/apps/vtex.login), and the [search bar](https://developers.vtex.com/docs/apps/vtex.store-components/searchbar).\n\n![header](https://user-images.githubusercontent.com/52087100/74090325-b6235d00-4a88-11ea-8227-317f93204d8f.png) \n\n## Installation\n\n1. Add the `store-header` app to your theme's dependencies in the `manifest.json` file: \n\n```json\n  dependencies: {\n    \"vtex.store-header\": \"2.x\"\n  }\n```\n\nYou can now use all the blocks exported by the `store-header` app. The following table lists the available blocks:\n\n| Block name | Description | \n| --------  | ------------ | \n| `header-layout.desktop` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Defines the Header layout for desktop devices through `header-row` blocks. | \n| `header-layout.mobile`| Defines the Header layout for mobile devices through `header-row` blocks. |\n| `header-row` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Create Header lines according to your store needs. |  \n| `header-border` | Adds a `1px` margin to a Header row. | \n| `header-force-center` | Centralizes its children blocks in a Header row. | \n| `header-spacer` | Adds spacing between blocks throughout a Header row. | \n\n## Configuration\n\n1. Declare the `header-layout.desktop` and `header-layout.mobile` blocks in your `header.jsonc` file. This allows you to define different header structures for desktop and mobile devices.\n\n```json\n{\n  \"header\": {\n    \"blocks\": [\n      \"header-layout.desktop\",\n      \"header-layout.mobile\"\n    ]\n  },\n```\n\n\u003eℹ️ The Header is a default store interface element defined in the `interfaces.json` file, so you don't need to declare it in every template. Store Framework automatically applies your configuration across all store pages. To customize the header for specific pages, see the [Advanced configuration](#advanced-configuration) section.\n\n2. In your `header.jsonc` file, define `header-row` blocks inside `header-layout.desktop` and `header-layout.mobile`. The number of rows depends on your store design.\n\n```json\n{\n  \"header\": {\n    \"blocks\": [\n      \"header-layout.desktop\",\n      \"header-layout.mobile\"\n    ]\n  },\n  \"header-layout.desktop\": {\n    \"children\": [\n      \"header-row#1-desktop\",\n      \"header-row#2-desktop\",\n      \"header-row#3-desktop\",\n      \"header-row#4-desktop\"\n    ]\n  },\n```\n\n\u003e⚠️ The example above uses four rows for the desktop header. This setup allows replicating the header to include telemarketing functionalities (when activated), notifications, page links, and other blocks, such as a logo and menu.\n\n3. Configure each `header-row` by adding props and declaring the desired blocks as children. The most commonly used blocks are [Logo](https://developers.vtex.com/docs/apps/vtex.store-components/logo), [Minicart](https://developers.vtex.com/docs/apps/vtex.minicart), and [Menu](https://developers.vtex.com/docs/apps/vtex.menu).\n\nIn the example below, we'll add a [Telemarketing](https://developers.vtex.com/docs/apps/vtex.telemarketing) bar to the first row:\n\n```json\n\"header-row#1-desktop\": {\n  \"children\": [\n    \"telemarketing\"\n  ],\n  \"props\": {\n    \"fullWidth\": true\n  }\n},\n```\n\n- `header-row` props: \n\n| Prop name  | Type      | Description                                                                                       | Default value |\n| ---------- | --------- | ------------------------------------------------------------------------------------ | ------------- |\n| `zIndex` | `Number` | Controls the vertical stacking order of elements for overlapping.                                                                      | `0`         |\n| `sticky` | `Boolean` | Determines if the header row remains fixed at the top of the screen during scroll (true) or not (false).                                                                  | `false`          |\n| `fullWidth` | `Boolean` | Determines if the header row should span the full width of the screen.                                                                  | `true`          |\n| `inverted` | `Boolean` | If true, the row uses the inverted base color defined in styles.json.                                                                  | `false`          |\n\n⚠️ Repeat this process for all `header-row` blocks in both `header-layout.desktop` and `header-layout.mobile`, configuring each block with the necessary props.\n\n### Layout customization blocks\n\nYou can use the `header-border`, `header-force-center`, and `header-spacer` blocks as children of `header-row` to customize your header layout.\n\n- **`header-border`**\n\nAdds a `1px` margin to a header row.\n\n```json\n\"header-row#2-desktop\": {\n  \"children\": [\n    \"header-border\",\n    \"notification.bar#home\"\n  ],\n  \"props\": {\n    \"fullWidth\": \"true\"\n  }\n},\n\"notification.bar#home\": {\n  \"props\": {\n    \"content\": \"SELECTED ITEMS ON SALE! CHECK IT OUT!\"\n  }\n},\n```\n\n- **`header-force-center`**\n\nCentralizes its child blocks within a header row.\n\n```json\n\"header-row#4-desktop\": {\n  \"props\": {\n    \"blockClass\": \"main-header\",\n    \"horizontalAlign\": \"center\",\n    \"verticalAlign\": \"center\",\n    \"preventHorizontalStretch\": true,\n    \"preventVerticalStretch\": true,\n    \"fullWidth\": true\n  },\n  \"children\": [\"header-force-center\"]\n},  \n\"header-force-center\": {\n  \"children\":[\n    \"logo#desktop\"\n  ]\n},\n\"logo#desktop\": {\n  \"props\": {\n    \"title\": \"Logo\",\n    \"href\": \"/\",\n    \"url\": \"https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png\",\n    \"width\": \"180\"\n  }\n},\n```\n\n- **`header-spacer`**: \n\nAdds a flexible space between blocks in a header row. Blocks declared before `header-spacer` are pushed to the left, and blocks declared after are pushed to the right.\n\n```json\n\"header-row#3-desktop\": {\n  \"children\": [\n    \"vtex.menu@2.x:menu#websites\",\n    \"header-spacer\",\n    \"vtex.menu@2.x:menu#institutional\"\n  ],\n  \"props\": {\n    \"blockClass\": \"menu-link\",\n    \"inverted\": \"true\"\n  }\n},\n```\n\n### Advanced configuration\n\nBy default, the header configuration is applied to all store templates. To override this behavior and apply custom configurations to different templates, you can modify the `interfaces.json` file.\n\nFor detailed instructions, see the guide [Customizing the Header and Footer blocks by page](https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-the-header-and-footer-blocks-by-page).\n\n## Customization\n\nTo apply CSS customizations to these and other blocks, follow the instructions in [Using CSS Handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).\n\n| CSS Handles          | \n|----------------------|\n| `container`          |                       \n| `leanMode`           |                        \n| `topMenuContainer`   | \n| `topMenuLogo`        |              \n| `topMenuSearchBar`   |     \n| `topMenuIcons`       |             \n| `topMenuCollapsible` |   \n| `forceCenter`        |   \n| `forceCenterInnerContainer` |   \n| `headerBorder` | \n| `headerSpacer` | \n| `headerStickyRow` | \n| `headerRowContentContainer` |\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\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 welcome!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fstore-header","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Fstore-header","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fstore-header/lists"}