Navigation Menu¶
Fully responsive and works out of the box with:
- Components and Layouts
- Transients
- Theme Components: Content Section and Navigation Set
Example Usage¶
Initialize using the following in Global.js:
.js¶
import NavigationMenu from 'extensions/navigation-menu';
/**
* Initialize the Navigation Menu extension
*/
new NavigationMenu({
breakpoint: '75em',
drawers: '.js-navigation-menu__drawer',
mainMenu: '.js-navigation-menu',
mainMenuCloseButtons: '.js-navigation-menu__close',
mainMenuOpenButtons: '.js-navigation-menu__open',
menuItems: '.js-navigation-menu__link',
parentMenus: '.js-navigation-menu__has-child',
showPreviousMenuButtons: '.js-navigation-menu__previous'
});
.scss¶
@import "extensions/navigation-menu/navigation-menu";
.mvt¶
See:
- cssui-global-header.mvt
- readytheme/contentsection/navigation_menu.mvt
- readytheme/navigationset/navigation_menu_quicklinks.mvt
Components and Layouts Setup¶
Components¶
| Component Code | Nesting | Required | Description |
|---|---|---|---|
| navigation-menu_parent | true | true | This will set the main (top-level) navigation link. Nest columns here. |
| navigation-menu_column | true | true | Tells the menu that a new column has been made. |
| navigation-menu_link | true | false | A navigation menu link. "Standalone" setting will give it a unique class. |
| navigation-menu_image | false | false | A navigation menu image that can be linked to a URL. |
navigation-menu_parent¶
| Field Code | Required | Description |
|---|---|---|
| link | false | Add a link to the component item to an existing page, category, product, or URL. |
| grid | false | Will define the columns per row in the sub-menu/drawer display (desktop only). |
navigation-menu_column¶
| Field Code | Required | Description |
|---|---|---|
| css_classes | false | Allows the user to set additional classes for the column. |
navigation-menu_link¶
| Field Code | Required | Description |
|---|---|---|
| link | false | Add a link to the component item to an existing page, category, product, or URL. |
| standout_link | false | If set, allows the user to define the link as a standout link (ie. "View More"). Standout links have the class g-navigation-menu__link--standout applied to the element. By default, this class currently underlines the text. |
| css_classes | false | Allows the user to set additional classes for the link. |
navigation-menu_image¶
| Field Code | Required | Description |
|---|---|---|
| image | true | Set the image to be used. |
| alt_text | true | Set the alt text copy for the image. |
| link | false | Add a link to the image to an existing page, category, product, or URL. |
Structure¶
- The
navigation-menu_parentcomponent is used to define the top-level links in a navigation menu. - The
navigation-menu_columncomponent is used to group a set of links in a navigation menu row.- A drop-down menu is used if a parent item only has one column defined.
- You can set the number of columns (4 or 5) per row in the
navigation-menu_parentcomponent.
- The
navigation-menu_linkscomponent is used for regular links or as a "parent" for a subset of children links by nestingnavigation-menu_linkscomponents under the component. - The
navigation-menu_imagecomponent is used to display promotional images in the navigation menu on desktop screen sizes. This component's structure is similar to the navigation menu columns and should be applied on the same level as thenavigation-menu_columncomponent.
Example structure¶
- Navigation Menu Parent (Level 1)
- Navigation Menu Column
- Navigation Menu Link (Level 2)
- Navigation Menu Link (Level 3)
- Navigation Menu Link (Level 3)
- Navigation Menu Link (Level 3)
- Navigation Menu Link (Level 3)
- Navigation Menu Link (Level 2)
- Navigation Menu Image
- Navigation Menu Column
Note
The navigation menu currently only supports up to three levels of navigation links.
Quicklinks Setup¶
Customer links (ie. Sign In/My Account, Wishlist and Contact) are hardcoded into the navigation menu content section. The code for this can be found in readytheme/navigationset/navigation_menu_quicklinks.mvt.
Pro Tip
Additional customer account links may be added as navigation items to the navigation set and will display as a submenu when clicking the My Account link.
Quicklinks with account sub-menu
Quicklinks with account sub-menu
Creating C&L Layout Import For Existing Navigation Sets¶
The following template code can be used to create the XML provisioning import file for the navigation menu C&L layout for an existing navigation set. There is a l.max_grids variable at the top of the code that controls the grid attribute value for the navigation-menu_parent components. This defaults to 4.
To generate the import file, place the following code in the navigation set template and run a page that renders the navigationset readytheme item, ie. <mvt:item name="readytheme" param="navigationset( 'primary_navigation' )" />. After the item is rendered, a component_layouts--layout-navigation-menu.xml file will be generated in the "script" data directory, ie. /httpdocs/component_layouts--layout-navigation-menu.xml. This file can then be uploaded in the admin via Data Management to create the navigation_menu C&L layout. Note that the C&L navigation menu components must be created first before importing the layout XML file.
Data Management > Import Data and Settings in XML Provisioning Format
Navigation Set Conversion Template Code¶
<mvt:assign name="l.max_code_length" value="50" />
<mvt:assign name="l.max_grids" value="4" />
<mvt:capture variable="l.settings:navigation_menu_layout_import">
<Module code="TGCOMPONENTS" feature="util">
<Layout_Add>
<Code>navigation_menu</Code>
<Name><![CDATA[Mega Menu]]></Name>
</Layout_Add>
<mvt:foreach iterator="navigationitem" array="readytheme:navigationitems">
<mvt:assign name="l.settings:navigationitem:cl:level2_count" value="miva_array_elements( l.settings:navigationitem:items )" />
<mvt:assign name="l.settings:navigationitem:cl:parent_code" value="'parent_link_' $ l.pos1" />
<LayoutComponent_Add layout="navigation_menu" component="navigation-menu_parent">
<Name><![CDATA[&mvte:navigationitem:name;]]></Name>
<Code>&mvte:navigationitem:cl:parent_code;</Code>
<Active>1</Active>
<Attributes>
<Attribute code="link">
<mvt:if expr="l.settings:navigationitem:link_type EQ 'N'">
<LinkType>None</LinkType>
<mvt:else>
<mvt:assign name="l.settings:navigationitem:cl:link_type" value="'Category'" />
<mvt:if expr="l.settings:navigationitem:link_type EQ 'P'">
<mvt:assign name="l.settings:navigationitem:cl:link_type" value="'Product'" />
<mvt:elseif expr="l.settings:navigationitem:link_type EQ 'U'">
<mvt:assign name="l.settings:navigationitem:cl:link_type" value="'URL'" />
<mvt:elseif expr="l.settings:navigationitem:link_type EQ 'G'">
<mvt:assign name="l.settings:navigationitem:cl:link_type" value="'Page'" />
</mvt:if>
<LinkType>&mvte:navigationitem:cl:link_type;</LinkType>
<Value><![CDATA[&mvte:navigationitem:link_dest;]]></Value>
</mvt:if>
</Attribute>
<mvt:if expr="l.settings:navigationitem:cl:level2_count GE l.max_grids">
<Attribute code="grid">
<Value><mvt:eval expr="int( l.max_grids )" /></Value>
</Attribute>
</mvt:if>
</Attributes>
</LayoutComponent_Add>
<mvt:if expr="l.settings:navigationitem:cl:level2_count">
<mvt:assign name="l.navigation_column_count" value="1" />
<mvt:foreach iterator="navigationitem_level2" array="navigationitem:items">
<mvt:assign name="l.settings:navigationitem_level2:cl:parent_code" value="l.settings:navigationitem:cl:parent_code $ '_column_' $ l.navigation_column_count" />
<mvt:if expr="l.pos2 LE l.max_grids">
<LayoutComponent_Add layout="navigation_menu" component="navigation-menu_column">
<Name><![CDATA[Column <mvt:eval expr="l.navigation_column_count" />]]></Name>
<Code>&mvte:navigationitem_level2:cl:parent_code;</Code>
<Active>1</Active>
<Parent><![CDATA[&mvte:navigationitem:name;]]></Parent>
<Parent_Code>&mvte:navigationitem:cl:parent_code;</Parent_Code>
<Attributes></Attributes>
</LayoutComponent_Add>
</mvt:if>
<mvt:assign name="l.settings:navigationitem_level2:cl:code" value="substring( l.settings:navigationitem:cl:parent_code $ '_l2_' $ l.settings:navigationitem_level2:id, 1, l.max_code_length )" />
<LayoutComponent_Add layout="navigation_menu" component="navigation-menu_link">
<Name><![CDATA[&mvte:navigationitem_level2:name;]]></Name>
<Code>&mvte:navigationitem_level2:cl:code;</Code>
<Active>1</Active>
<Parent><![CDATA[Column <mvt:eval expr="l.navigation_column_count" />]]></Parent>
<Parent_Code>&mvte:navigationitem_level2:cl:parent_code;</Parent_Code>
<Attributes>
<Attribute code="link">
<mvt:if expr="l.settings:navigationitem_level2:link_type EQ 'N'">
<LinkType>None</LinkType>
<mvt:else>
<mvt:assign name="l.settings:navigationitem_level2:cl:link_type" value="'Category'" />
<mvt:if expr="l.settings:navigationitem_level2:link_type EQ 'P'">
<mvt:assign name="l.settings:navigationitem_level2:cl:link_type" value="'Product'" />
<mvt:elseif expr="l.settings:navigationitem_level2:link_type EQ 'U'">
<mvt:assign name="l.settings:navigationitem_level2:cl:link_type" value="'URL'" />
<mvt:elseif expr="l.settings:navigationitem_level2:link_type EQ 'G'">
<mvt:assign name="l.settings:navigationitem_level2:cl:link_type" value="'Page'" />
</mvt:if>
<LinkType>&mvte:navigationitem_level2:cl:link_type;</LinkType>
<Value><![CDATA[&mvte:navigationitem_level2:link_dest;]]></Value>
</mvt:if>
</Attribute>
<Attribute code="standout_link">
<Value><![CDATA[0]]></Value>
</Attribute>
</Attributes>
</LayoutComponent_Add>
<mvt:foreach iterator="navigationitem_level3" array="navigationitem_level2:items">
<mvt:assign name="l.settings:navigationitem_level3:cl:code" value="substring( l.settings:navigationitem:cl:parent_code $ '_l3_' $ l.settings:navigationitem_level3:id, 1, l.max_code_length )" />
<LayoutComponent_Add layout="navigation_menu" component="navigation-menu_link">
<Name><![CDATA[&mvte:navigationitem_level3:name;]]></Name>
<Code>&mvte:navigationitem_level3:cl:code;</Code>
<Active>1</Active>
<Parent><![CDATA[&mvte:navigationitem_level2:name;]]></Parent>
<Parent_Code>&mvte:navigationitem_level2:cl:code;</Parent_Code>
<Attributes>
<Attribute code="link">
<mvt:if expr="l.settings:navigationitem_level3:link_type EQ 'N'">
<LinkType>None</LinkType>
<mvt:else>
<mvt:assign name="l.settings:navigationitem_level3:cl:link_type" value="'Category'" />
<mvt:if expr="l.settings:navigationitem_level3:link_type EQ 'P'">
<mvt:assign name="l.settings:navigationitem_level3:cl:link_type" value="'Product'" />
<mvt:elseif expr="l.settings:navigationitem_level3:link_type EQ 'U'">
<mvt:assign name="l.settings:navigationitem_level3:cl:link_type" value="'URL'" />
<mvt:elseif expr="l.settings:navigationitem_level3:link_type EQ 'G'">
<mvt:assign name="l.settings:navigationitem_level3:cl:link_type" value="'Page'" />
</mvt:if>
<LinkType>&mvte:navigationitem_level3:cl:link_type;</LinkType>
<Value><![CDATA[&mvte:navigationitem_level3:link_dest;]]></Value>
</mvt:if>
</Attribute>
</Attributes>
</LayoutComponent_Add>
</mvt:foreach>
<mvt:assign name="l.navigation_column_count" value="l.navigation_column_count + 1" />
<mvt:if expr="l.navigation_column_count GT l.max_grids">
<mvt:assign name="l.navigation_column_count" value="1" />
</mvt:if>
</mvt:foreach>
</mvt:if>
</mvt:foreach>
</Module>
</mvt:capture>
<mvt:assign name="l.file" value="'/component_layouts--layout-navigation-menu.xml'" />
<mvt:assign name="l.file_exists" value="sexists( l.file )" />
<mvt:if expr="l.file_exists">
<mvt:assign name="l.file_deleted" value="sdelete( l.file )"/>
</mvt:if>
<mvt:assign name="l.file_created" value="file_create( l.file, 'script', l.settings:navigation_menu_layout_import )"/>