Skip to content

EDU-13531 - Feedback #4161 - Error #183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
barbara-celi wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

EDU-13531 - Feedback #4161 - Error #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f56b06e
Update README.md
barbara-celi Oct 29, 2024
4585f47
Adding all contributors in README.md
barbara-celi Oct 29, 2024
45c83af
Update CHANGELOG.md
barbara-celi Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

### Fixed

- Fix `blockClass` prop name.

## [2.35.2] - 2023-04-25

### Fixed
Expand Down
22 changes: 13 additions & 9 deletions docs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@

<!-- ALL-CONTRIBUTORS-BADGE:END -->

VTEX Menu is a store component that displays a bar containing links and dropdown submenus.
The Menu component displays a navigation bar with links and dropdown submenus. It can be configured to display internal or external links and supports both category-based and custom menu items.

![menu-app](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-menu-0.png)

## Configuration

1. Import the menu app to your dependencies as `manifest.json`. For example:
1. Add the app to your store theme's dependencies in the `manifest.json`.

```json
"dependencies": {
Expand Down Expand Up @@ -98,7 +98,9 @@ _Example:_
}
```

You can define a submenu for a menu item:
### Adding a submenu

You can define a submenu by adding the `submenu` block to a `menu-item`:

```jsonc
"menu-item#shop": {
Expand Down Expand Up @@ -128,9 +130,11 @@ You can define a submenu for a menu item:
```

<div class="alert alert-info">
The Menu block has no prerequisite children. Therefore, Menu block implementations do not need to have any blocks declared within them to function properly.
The Menu block doesn't require any specific child blocks to function
</div>

## `menu-item` props

The available `menu-item` block props are as follows:

| Prop name | Type | Description | Default value |
Expand All @@ -142,9 +146,9 @@ The available `menu-item` block props are as follows:
| `iconProps` | `IconProps` | Icon props | `undefined` |
| `onMountBehavior` | `enum` | Whether the submenu should always be automatically displayed when its parent is hovered/clicked on (`open`) or (`close`). | `closed` |
| `itemProps` | `CategoryItem` or `CustomItem` | Item props | `undefined` |
| `classes` | `CustomCSSClasses` | Used to override default CSS handles. To better understand how this prop works, we recommend reading about it [here](https://github.com/vtex-apps/css-handles#usecustomclasses). Please note that this is only useful when importing this block as a React component. | `undefined` |
| `blockClass` | `CustomCSSClasses` | Used to override default CSS handles. To learn how this prop works, we recommend reading about it [here](https://github.com/vtex-apps/css-handles#usecustomclasses). Please note that this is only useful when importing this block as a React component. | `undefined` |

- For icons in the menu items:
### Icon props

| Prop name | Type | Description | Default value |
| ----------------- | --------- | --------------------------------------- | ------------- |
Expand All @@ -155,14 +159,14 @@ The available `menu-item` block props are as follows:
| `activeClassName` | `string` | Icon classname when `isActive` is true | N/A |
| `mutedClassName` | `string` | Icon classname when `isActive` is false | N/A |

- For category-related menu items:
### Category-specific props

| Prop name | Type | Description | Default value |
| ------------ | -------- | ---------------- | ------------- |
| `categoryId` | `number` | Item category ID | N/A |
| `text` | `string` | Menu item text | N/A |

- For customized items:
### Custom item props

| Prop name | Type | Description | Default value |
| ---------- | --------- | ----------------------------------------------- | ------------- |
Expand All @@ -172,7 +176,7 @@ The available `menu-item` block props are as follows:
| `tagTitle` | `string` | Menu item tag | N/A |
| `text` | `string` | Menu item text | N/A |

#### Customization
## Customization

To apply CSS customizations to this and other blocks, please 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).

Expand Down