Giter VIP home page Giter VIP logo

menu's Introduction

📢 Don't fork this project. Use, contribute, or open issues through Store Discussion.

Menu

All Contributors

VTEX Menu is a store component that displays a bar containing links and dropdown submenus.

menu-app

Configuration

  1. Import the menu app to your dependencies as manifest.json. For example:
  "dependencies": {
    "vtex.menu": "2.x"
  }
  1. Add the [email protected]:menu block to the store header template.

  2. Configure the menu-item blocks to build the store menu options. These can be declared in two ways in [email protected]:menu: as children or as props. The advantage of the second type of menu-item configuration is that Site Editor can be used to edit the blocks.

menu-item as children

Example:

"[email protected]:menu#websites": {
  "children": [
    "menu-item#shop",
    "menu-item#about-us"
  ]
},
"menu-item#shop": {
  "props": {
    "id": "menu-item-shop",
    "type": "custom",
    "highlight": false,
    "itemProps": {
      "type": "internal",
      "href": "#",
      "noFollow": false,
      "tagTitle": "Shop",
      "text": "Shop"
    },
    "iconProps": {
      "id": "bnd-logo",
      "size": 16,
      "viewBox": "0 0 16 16",
      "activeClassName": "rebel-pink",
      "mutedClassName": "c-action-primary"
    },
    "iconToTheRight": true
  }
}

menu-item as props

Example:

"[email protected]:menu#websites": {
  "props": {
    "items": [
      {
        "id": "menu-item-shop",
        "type": "custom",
        "highlight": false,
        "itemProps": {
          "type": "internal",
          "href": "#",
          "noFollow": false,
          "tagTitle": "Shop",
          "text": "Shop"
        }
      },
      {
        "id": "menu-item-about-us",
        "type": "custom",
        "highlight": false,
        "itemProps": {
          "type": "internal",
          "href": "/about-us",
          "noFollow": false,
          "tagTitle": "about-us",
          "text": "About Us"
        }
      }
    ]
  }
}

You can define a submenu for a menu item:

"menu-item#shop": {
  "props": {
    "type": "custom",
    "highlight": false,
    "itemProps": {
      "type": "internal",
      "href": "#",
      "noFollow": false,
      "tagTitle": "Shop",
      "text": "Shop"
    },
  },
  "blocks": ["[email protected]:submenu#shop"] // Defining a submenu
},
"[email protected]:submenu#shop": {
  "children": [
    "[email protected]:menu#submenushop"
  ]
},
"[email protected]:menu#submenushop": {
  "children": [
    "menu-item#shop"
  ]
}
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 available menu-item block props are as follows:

Prop name Type Description Default value
type string Menu item type, either category or custom category
id string Menu item ID undefined
highlight boolean Whether the item has a highlight undefined
iconPosition string Icon position relative to the menu item text. Either to the left or right. left
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. Please note that this is only useful when importing this block as a React component. undefined
  • For icons in the menu items:
Prop name Type Description Default value
id string Icon ID N/A
isActive boolean Whether or not the item is active true
size number Icon size 16
viewBox string Icon view box 0 0 16 16
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:
Prop name Type Description Default value
categoryId number Item category ID N/A
text string Menu item text N/A
  • For customized items:
Prop name Type Description Default value
type string Menu item type, either internal or external internal
href string Link to where the menu item leads N/A
noFollow boolean No follow attribute N/A
tagTitle string Menu item tag N/A
text string Menu item text N/A

Customization

To apply CSS customizations to this and other blocks, please follow the instructions in Using CSS Handles for store customization.

CSS Handle
accordionIcon--isClosed
accordionIcon--isOpen
accordionIcon
container
linkLeft
linkMiddle
linkRight
menuContainerNav
menuContainer
menuItemInnerDiv
menuItem
menuItem--isOpen
menuItem--isClosed
menuLinkDivLeft
menuLinkDivMiddle
menuLinkDivRight
menuLinkNav
renderLink
styledLinkContainer
styledLinkContent
styledLinkIcon
styledLink
submenuAccordion
submenuColumn
submenuContainer
submenuWrapper--isClosed
submenuWrapper--isOpen
submenuWrapper
submenu

Contributors

Thanks goes to these wonderful people (emoji key):

Giovana Pereira
Giovana Pereira

💻

This project follows the all-contributors specification. Contributions of any kind are welcome!

menu's People

Contributors

augustolazaro avatar camilavcoutinho avatar claudivanfilho avatar dependabot[bot] avatar estacioneto avatar gabrielgalc avatar guerreirobeatriz avatar gugabribeiro avatar guifromrio avatar hideyuk1 avatar iago1501 avatar iaronaraujo avatar igorbrasileiro avatar ivanlopezluna avatar jeymisson avatar jgfidelis avatar kaio-donadelli avatar kaisermann avatar klynger avatar klzns avatar lariciamota avatar lbebber avatar lucis avatar mariana-caetano avatar rerissondaniel avatar thiagomurakami avatar tlgimenes avatar victorhmp avatar vitoria avatar vwraposo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

menu's Issues

Implement Style Builder best practices

Other apps are using the blockClass and CSS modules to pay nicely with style builder. The only interface here that has this is menu-link, but the other interfaces like menu, submenu, menu-item have no semantic classes and no blockClass prop.

Context

I need to style one of the menu-item differently from other ones (bigger font, bolder text, etc), but I can't because there is no blockClass.

Can't access menu .absolute container in submenu container.

Menu container can't be access with css because it don't have a vtex app class in absolute container like category-menu

Expected Behavior

Access to menu app absolute container.

Current Behavior

Can't access to container to modify the background color or width.

Possible Solution

Add vtex class like category-menu app (image below).

Steps to Reproduce (for bugs)

  1. Create submenu with categories.
  2. Try to access absolute class.
  3. Vtex IO transform .absolute selector to vtex-app.version-absolute.

Here a couple of images to show differences between category-menu app absolute and the category app.
category-menu app absolute (accessible)
image
subcategorymenu (can't acces)
image

v2.35.1 makes harder to debug menus

Describe the bug
when building a store's menu, you just need to style it, with old versions you can just open your developer tools and select items to inspect but with the latest release v2.35.1 you can't anymore, i know this was a "bug" to solve but now it's harder to debug styles on the menus

To Reproduce
Steps to reproduce the behavior:

  1. Create a menu and a submenu
  2. Add some classes on the submenu items
  3. Now try to inspect any element on the submenu and the element containing all the submenu links will disappear from the DOM due to the behavior solved on the commit "51fe4d9"

Expected behavior
Don't know, maybe a development flag via JSON file to disable the "Deactivate item when is not open or hovered
" behavior to make it easy to style menus

Screenshots
You can replicate on any environment

Desktop environment:

System:
OS: macOS 13.2.1
CPU: (8) arm64 Apple M1
Memory: 120.77 MB / 8.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
Yarn: 1.22.15 - ~/.nvm/versions/node/v16.15.0/bin/yarn
npm: 9.2.0 - ~/.nvm/versions/node/v16.15.0/bin/npm
Browsers:
Chrome: 112.0.5615.49
Firefox: 105.0.2
Safari: 16.3

Additional context
You can test on any vtex store where menu app is used, some examples below:
https://www.klyns.mx/
https://www.almacenhercules.mx/

Menu links not rendering the "page" prop correctly

When configuring the menu links, the internal or external route urls should be used according to the configuration. What happens instead is a "#" is generated for every menu "Link".

Expected Behavior

Configured external or Internal route is used

Current Behavior

A generic "#" is rendered for the href of every link item.

Possible Solution

Use internalPage or externalPage in place of the "page" string

Steps to Reproduce (for bugs)

  1. Configure the DreamStore "Menu"
  2. Create 1 item as internal and select random page from dropdown
  3. Create 1 item as external and fill in an appropriately constructed absolute url
  4. View frontend link. The internal link generates a # and the external link is "undefined"

Context

Cannot just configure the dreamstore menu without customizing component for such small change

Your Environment

Improve documentation

The only interface documented on the latest version of the README is menu-link.
All interfaces should be documented, the ones missing are menu, submenu, submenu.col, submenu.accordion and menu-item.

Bug in menu items click

Describe the bug
A clear and concise description of what the bug is.
Quando clicamos em algum item menu do filter, primeiro ele dá um reload na página em que está, para depois ir para a página certa.

To Reproduce
Steps to reproduce the behavior:

  1. Go to ' https://homolog1--shoulder.myvtex.com/roupas/blusas '
  2. Click on 'Qualquer item do footer'
  3. See error

Expected behavior
A clear and concise description of what you expected to happen.
Ir diretamente para a página.

Screenshots
If applicable, add screenshots to help explain your problem.
https://monosnap.com/file/ltvbP4OvB1aml1rQkbxot9gpWMk9ml

Desktop environment:

Smartphone environment:

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

[Feature Request] hideIfEmpty

Hello,

It would be useful if we could have a prop like "hideIfEmpty" that hides the item if it does not contain products in that category. Do not load all categories even if they do not have products.

Describe the solution you'd like

"menu-item#someItem": {
        "props": {
            "type": "category",
            "categoryId": 1,
            "hideIfEmpty": true,
            ...
        },
        "blocks": [
            "[email protected]:submenu#submenu-someSubmenu"
        ]
    },

Check for products based on categoryId and if there are no products just return null

[Feature Request] Carousel on SubMenu

Is your feature request related to a problem? Please describe.
I'd like to add multiple images on submenu.col block

Describe the solution you'd like
Allow the interface carousel from vtex.carousel app, similar to how it already allows info-card

Describe alternatives you've considered
I got nothing, so here's a cool emoji to fill the void 👾

Additional context
WOMEN

How convert url in item to lowecase from UpperCase ?

What are you trying to accomplish? Please describe.
Hi. I search solutions for to fix some bugs on the page. I do not fully understand but another person from the team says that I must change linkID in the category. But is impossible to make because API does not support this field to change. The question is the same as in the title. Exist some function or solution to transform URL in the menu item to lowercase?

What have you tried so far?
I tried changing linkID in the category but is impossible.

Version 3.x losing sequence while editing on Site Editor

Hello,

Version 3.x seens to be not working properly when sequence is changed -> vtex.menu -> vtex.disposition -> children

I setted order, show: true and a __editorItemTitle for 10 child elements but could not get it to work properly.

Regards,

Michel.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.