As we've seen in the last step, a Submenu accepts any Store Framework block as child.
With this in mind, we can improve the previous activity's Menu configuration, adding to its content by using Flex Layout.
Activity
According to what we did in the last activity and what was learned about Flex Layout, let's apply Flex Layout to the Major Appliances submenu.
In the menu.jsonc file, remove the block of code in which you define vtex.menu@2.x:submenu#major and also its children. This code block will be declared in a new file soon:
Create the menu-flex.jsonc file, the code block that is declared above needs to be in this file; flex-layout.row#major will be in the children list pertaining to the vtex.menu@2.x:submenu#major block and it's defined as:
Now, let's declare the blocks defined in flex-layout.row#major. To start, declare the flex-layout.col#menu block, having vtex.menu@2.x:menu#major as child;
Do the same for the flex-layout.col#img block, declaring image#menu and rich-text#header as its children, in addition to the following props:
Advanced menu with Flex Layout
:sparkles: Branch: menuflex
Introduction
As we've seen in the last step, a Submenu accepts any Store Framework block as child.
With this in mind, we can improve the previous activity's Menu configuration, adding to its content by using Flex Layout.
Activity
According to what we did in the last activity and what was learned about Flex Layout, let's apply Flex Layout to the Major Appliances submenu.
In the
menu.jsonc
file, remove the block of code in which you definevtex.menu@2.x:submenu#major
and also its children. This code block will be declared in a new file soon:Create the
menu-flex.jsonc
file, the code block that is declared above needs to be in this file;flex-layout.row#major
will be in the children list pertaining to thevtex.menu@2.x:submenu#major
block and it's defined as:Now, let's declare the blocks defined in
flex-layout.row#major
. To start, declare theflex-layout.col#menu
block, havingvtex.menu@2.x:menu#major
as child;Do the same for the
flex-layout.col#img
block, declaringimage#menu
andrich-text#header
as its children, in addition to the following props:Lastly, let's declare the former
image#menu
as child in this last step, using the code below::information_source: Remember to access the documentation of both Flex Layout and Menu if you have any questions during the activity.
Expected result:![](https://user-images.githubusercontent.com/18701182/73485057-365b0b80-4381-11ea-9c0b-4fad693f829a.png)
: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.