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 | 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.
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",
}
]
}
}
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.
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 |
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 yourmanifest.json
:
"builders": {
"styles": "1.x"
}
- Create a file called
vtex.menu.css
inside thestyles/css
folder. Add your custom styles:
.container {
margin-top: 10px;
}
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 |
You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.
Check it out how to contribute with this project.
To execute our tests go to react/
folder and run yarn test
Thanks goes to these wonderful people (emoji key):
Giovana Pereira 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!