Skip to content
VTEX Menu app
Branch: master
Clone or download
Latest commit 77b7062 May 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create link menu to header May 5, 2018
messages
react Update snapshots May 25, 2019
store Rename collapsible to accordion Apr 25, 2019
.gitignore Update CHANGELOG Jan 9, 2019
.travis.yml Create link menu to header May 5, 2018
.vtexignore Feature/custom menu (#30) Mar 28, 2019
CHANGELOG.md Release v2.14.0 May 25, 2019
README.md Update README.md May 3, 2019
lint.sh Feature/custom menu (#30) Mar 28, 2019
manifest.json Release v2.14.0 May 25, 2019

README.md

VTEX Menu

Description

The VTEX Menu app is store component that shows a bar with links and drop-down menus, and this app is used by store theme.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Release schedule

Release Status Initial Release Maintenance LTS Start End-of-life Store Compatibility
[2.x] Current Release 2018-11-27 2.x
[1.x] Maintenance LTS 2018-08-17 2018-11-27 March 2019 1.x

See our LTS policy for more information.

Table of Contents

Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

We add the menu as a block in our Store Header.

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

  dependencies: {
    "vtex.menu": "2.x"
  }

Then, add menu-link block into your app theme as we do in our Store theme app.

Now, you can change the behavior of the menu block that is in the store header. See an example of how to configure:

"menu-link": {
    "props": {
      "links": [
        {
          "typeOfRoute": "internal",
          "page": "store/home",
          "position": "right",
          "text": "Atendimento",
        }
      ]
    }
  }

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within menu and describes if they are required or optional.

"menu-link": {
	"component": "index"
}

The menu has no required or allowed block. So, any menu block implementation do not need any block inside of menu.

Configuration

Through the Storefront, you can change the menu's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop name Type Description Default value
links Array(Link) Array of links that should appear in the menu []

Link:

Prop name Type Description Default value
text String Link text N/A
internalPage String Internal page path to redirect N/A
params String Parameters to pass when redirect to an internal page N/A
externalPage String External page path to redirect N/A
typeOfRoute String The route type, it can be internal or external N/A
page String Page route to redirect when the link is clicked N/A
position String Link position N/A

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.

  1. Add the styles builder to your manifest.json:
  "builders": {
    "styles": "1.x"
  }
  1. Create a file called vtex.menu.css inside the styles/css folder. Add your custom styles:
.container {
  margin-top: 10px;
}

CSS namespaces

Below, we describe the namespaces that are defined in the menu.

Token name Description Component Source
container The main container of menu index
linkLeft Link container when the link is to be left aligned index
linkMiddle Link container when the link is to be center aligned index
linkRight Link container when the link is to be right aligned index

Troubleshooting

You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.

Contributing

Check it out how to contribute with this project.

Tests

To execute our tests go to react/ folder and run yarn test

Travis CI

Build Status

You can’t perform that action at this time.