Menu

[github-learning-lab[bot]]

Menu

:sparkles: Branch: menu

Introduction

Having already configured and implemented the header, let's now add it to the Menu. Configuring the Menu is an important step in building your theme, since it's the block that's responsible for the user's navigation in your store. Because of its function and relevance, the Menu possesses a complex hierarchical structure, which involves menu items, submenus and, based on the latter, any Store Framework block (such as other Menus e Menu Items). Below we can see an image highlighting the Menu block's structure in practice:

Configuring the Menu

When compared to some of the other blocks, the Menu's configuration may seem more difficult due to its structure of menus, menu items and submenus. However the Menu does not necessarily need to be configured according to the most complex scenario. Below, we can check a basic implementation example for the block, containing just the following 3 Menu Items:

{
  "vtex.menu@2.x:menu#categories": {
    "children": [
      "menu-item#major-appliances",
      "menu-item#small-appliances",
      "menu-item#electronics"
    ],

    "props":{
      "orientation": "horizontal"
    }
  }
},

Activity

This activity will help us understand more about configuring the Menu, in addition to its existing hierarchy based on building Menu Items and Submenus.

1. In header.jsonc, add header-row#menu as the last item on the header-layout.desktop block's child list (configured during the previous activity), so that the Menu can be rendered by the store's Header;

2. Copy and paste the code below to declare the header-row#menu block:

   "header-row#menu": {
     "children": [
       "header-spacer",
       "vtex.menu@2.x:menu#categories",
       "header-spacer"
     ]
   },

3. We also need to deal with the layout Menu for other devices, such as mobile. Therefore, add the drawer as the header-row#main-mobile block's first child;

4. Copy the code in the menu.jsonc code to horizontally render the 3 main Menu items:

   {
     "vtex.menu@2.x:menu#categories": {
       "children": [
         "menu-item#major-appliances",
         "menu-item#small-appliances",
         "menu-item#electronics"
       ],
   
       "props":{
         "orientation": "horizontal"
       }
   },

5. As we've seen in the introduction, a Menu Item can allow the configuration of a Submenu which in turn can have another Menu with its own Menu Items. Therefore, create a Submenu for Major Appliances, still in menu.jsonc, according to the example below:

   "vtex.menu@2.x:submenu#major":{
     "children":[
       "vtex.menu@2.x:menu#major"
     ]
   },

6. Following the format established by the vtex.menu@2.x:menu#categories\ block, build a secondary Major Appliances Menu, declared in the last step in menu.jsonc. You must set the orientation prop value to vertical and configure the following Menu Items in the block's children list: menu-item#refrigerators, menu-item#ovens and menu-item#washers;

7. In addition, create a Small Appliances submenu:

   "vtex.menu@2.x:submenu#small":{
     "children":[
       "vtex.menu@2.x:menu#small"
     ]
   },

8. Now build the Small Appliances secondary menu in menu.jsonc. As with the Major Appliances, you must set the orientation prop value to vertical and configure the following Menu Items in the block children list: menu-item#mixers, menu-item#toasters and menu-item#coffee;

9. Based on the previous steps, do the same with Electronics: create your Submenu (vtex.menu@2.x:submenu#electronics) and secondary Menu. Thereafter, build the latter with the same prop value (vertical) and configure the following Menu Items in the block's children list: menu-item#cameras, menu-item#laptops and menu-item#tvs.

Expected result:

:information_source: Remember to access the Menu's documentation if your have any questions during the activity.

---

:no_entry_sign: Are you lost?

Is there any problem with this step? What about sending us a feedback? :pray:

Submit feedback

---

If you're still unsure as to how to send your answers, click here.

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x::x::x::x::x::x::x::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Fetching files :white_check_mark: Code compilation: header.jsonc :white_check_mark: Code compilation: menu-items.jsonc :white_check_mark: Code compilation: menu.jsonc :white_check_mark: Major Appliances Menu item must contain correct submenu :white_check_mark: Small Appliances Menu item must contain correct submenu :white_check_mark: Electronics Menu item must contain correct submenu :white_check_mark: Main Category Menu must be stated :white_check_mark: Main Category Menu must have correct children :white_check_mark: Main Category Menu must be on horizontal orientation :x: You havent declared vtex.menu@2.x:menu#major on your menu.jsonc file :x: You havent declared the children menu-item#refrigerators, menu-item#ovens, menu-item#washers on vtex.menu@2.x:menu#major :x: You havent declared props "orientation" as "vertical" on vtex.menu@2.x:menu#major :x: You havent declared vtex.menu@2.x:menu#small on your menu.jsonc file :x: You havent declared the children menu-item#mixers, menu-item#toasters, menu-item#coffee on vtex.menu@2.x:menu#small :x: You havent declared props "orientation" as "vertical" on vtex.menu@2.x:menu#small :x: You havent declared vtex.menu@2.x:menu#electronics on your menu.jsonc file :x: You havent declared the children menu-item#cameras, menu-item#laptops, menu-item#tvs on vtex.menu@2.x:menu#electronics :x: You havent declared props "orientation" as "vertical" on vtex.menu@2.x:menu#electronics :white_check_mark: Menu row must be placed as last child of header :white_check_mark: Drawer must be placed as first child of header mobile :white_check_mark: Menu row must have correct children :white_check_mark: Major Submenu must have major menu as children :white_check_mark: Small Submenu must have small menu as children :white_check_mark: Electronics Submenu must have electronics menu as children

Try again :grin:

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Fetching files :white_check_mark: Code compilation: header.jsonc :white_check_mark: Code compilation: menu-items.jsonc :white_check_mark: Code compilation: menu.jsonc :white_check_mark: Major Appliances Menu item must contain correct submenu :white_check_mark: Small Appliances Menu item must contain correct submenu :white_check_mark: Electronics Menu item must contain correct submenu :white_check_mark: Main Category Menu must be stated :white_check_mark: Main Category Menu must have correct children :white_check_mark: Main Category Menu must be on horizontal orientation :white_check_mark: Major Appliances Menu must be stated :white_check_mark: Major Appliances must have correct children :white_check_mark: Major Appliances Menu must be on vertical orientation :white_check_mark: Small Appliances Menu must be stated :white_check_mark: Small Appliances must have correct children :white_check_mark: Small Appliances Menu must be on vertical orientation :white_check_mark: Electronics Menu must be stated :white_check_mark: Electronics Menu must have correct children :white_check_mark: Electronics Menu must be on vertical orientation :white_check_mark: Menu row must be placed as last child of header :white_check_mark: Drawer must be placed as first child of header mobile :white_check_mark: Menu row must have correct children :white_check_mark: Major Submenu must have major menu as children :white_check_mark: Small Submenu must have small menu as children :white_check_mark: Electronics Submenu must have electronics menu as children

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!