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 responsible for displaying a bar containing links and drop-down sub-menus.

menu-app

Configuration

  1. Import the menu's 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. To build the store's menu options, you need to configure the menu-item blocks. These can be declared in two different ways in [email protected]:menu: as children or as props. The advantage of this latest menu-item configuration compared 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, any menu block implementation does not need to have any blocks declared within it to properly function.

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 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 not (closed). 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. Note that this is only useful if you're 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 the item is active or not 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

In order to apply CSS customizations on this and other blocks, follow the instructions given in the recipe on 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

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

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.