SwissUpLabs Logo

Iconic Menu

Don’t have a menu yet? Create simple menu and come back!

Contents

Top Menu

Iconic Menu

  1. Navigate to Swissup > NavigationPro page, open menu to edit
  2. Apply custom item renderer to each top level category as shown below:

    Iconic Menu Backend

    <a href="{{navpro data='url'}}" class="{{navpro data='class'}} text-center">
        <img src="{{media url='wysiwyg/image.png'}}" alt="" />
        {{navpro data="name"}}
    </a>
    
  3. Click on Menu Settings button and fill the following CSS classes in Menu Settings panel: justify-around caret-bottom navpro-iconic iconic-vertical.

  4. That’s all. Clear Magento’s cache and see the result on the frontend.

Iconic Menu in a Dropdown

This menu looks similar to Apple Menu, except it shows dropdowns and uses one menu instance only.

  1. Navigate to Swissup > NavigationPro page, open menu to edit.
  2. Click Menu Settings button and change the following fields:

    Maximal Depth: 0
    CSS Class: justify-evenly caret-hidden
    

    First level dropdown settings

    Width: Full-Width
    Layout:
        Edit subcategories item:
            Columns Count 5
    

    Save the changes.

  3. Expand top-level category in the tree on the left side, and fill its children “Advanced Settings” with following values:

    Change “Name as Html” option only:

    <a href="{{navpro data='url'}}" class="{{navpro data='class'}} text-center flex flex-column items-center">
        <img src="{{media url='wysiwyg/image.png'}}" alt="" />
        {{navpro data="name"}}
    </a>
    

    Repeat this operation for each child.

    “Name as Html” content is identical for all chilren. You need to change <img src="{{media url='wysiwyg/image.png'}}" alt="" /> only.

  4. That’s all. Clear Magento’s cache and see the result on the frontend.

Next up

Edit this Page