Setup Navigation

Version 3.0

Understanding navigation

Before you begin, you can learn about the Arena Mega Navigation 3.0, and compare the way that navigation looks in different themes & default drop-down menu .

Features

With a full grid system built in and individual layout controls for each menu item, it’s easier than ever to build gorgeous mega menu layouts.

  • Fully Responsive
  • Mega or Dropdown-Flyout Submenus
  • Compatible with Mobile devices, including iPhone, iPad, and Android
  • Touch-enabled
  • Build advanced submenu layouts with the built in Bootstrap column grid system

Depending on the theme design, it usually seperate into:

  • Main Menu: The main menu is usually displayed as items across the width of the header (Horizontal). Visibility on Desktop device.
  • Verticle Main Menu: The verticle main menu is usually displayed as a list of items in a homepage sidebar (Verticle). Visibility on Desktop device
  • Mobile Menu. Visibility on Mobile optimize to display on mobile devices Navigation

Each part define by an Menu items (orlink lists) . Menu items are links to products, collections, webpages, blog posts, policies, or other websites.

You can add menu items to link to:

  • webpages
  • collections
  • products
  • blogs or blog posts
  • store policies
  • external websites
  • email links

Add Main Menu

Add, remove, or edit menu items

Assign a Menu item as Main Menu

  1. From your Shopify admin, go to Online Store > Themes
  2. Find the theme that you want to edit and click Customize
  3. Select Sections > Header
  4. Select a Menu item - Link List for Main Menu
  5. Click Save

Add Menu Label

Add a drop-down menu from the main menu

Add a Nesting menu item to build drop-down Main menu

You can build drop-down menus by creating or moving menu items so that they are “nested” below a top-level item. The top-level item appears in the main menu on your online store, and the nested menu items appear in a drop-down menu. The top-level item can have up to two levels of nested drop-down menus

Add a Mega menu from the Main Menu

Go to Configuration Mega menu

mega menu video

  1. From your Shopify admin, go to Online Store > Themes
  2. Find the theme that you want to edit and click Customize
  3. Select Sections > Header
  4. Select a Menu item - Link List for Main Menu
  5. Select Enable Mega Menu Option
  6. Add Content & Configure Mega Menu Detail
  7. Add Content Tabs (only for Mega Menu with Tabs )
  8. Click Save

Mega Menu usually build in 4 content layouts:

  • Mega Navigation: Horizontal mega menu for the Main menu
  • Mega Verticle Navigation: Horizontal mega menu layout for Verticle main menu
  • Mega Navigation with Tabs: Horizontal mega menu with Tabs for the Main menu
  • Tab Menu: Tab Content for Mega Navigation with Tabs

Add Sub Mega Menu Content with Mega Navigation & Mega Verticle Navigation

  1. From Header Section settings, Click Add Content

  2. Click Mega Navigation, the mega menu option for Main menu show up.

  3. Configure Parameter

    Parameter Description
    Block Label Block name for indentify
    Mega navigation trigger Add the title of the menu (in main menu) that you want to turn into a mega menu
    Submenu Position Position submenu appear relative to the main menu bar
    Width Sub menu width percentage relative to main menu width
    Background Settings Configure background images / color for the sub menu
    Min height Set minimum height for the sub menu
    COLUMN 01 - COLUMB 4 Configure content for each column in layouts

    Mega Menu Content Layouts

    If you would like to build a defined layout, you’ll want to become familiar with The Grid. The Grid is just a way of subdividing a container (generally the Sub menu - Mega menu -) into columns.
    Arena Mega Menu has the ability to divide each mega menu from 1 to 12 columns - Bootstrap 4 Grid mega menu layout Depending on the theme, each Mega Menu should be 4 or 5 Sub-menu items (COLUMN 01 - 04/05)

  4. Add Column component contents

  • Menu items: Normal menu items list
  • Multiple menu items: Use Nestesd menu items to show multi menu item.
  • Image: show an image.
  • Collection: collection products
  • Product: show one specific product.
  • Menu item & Product: menu item mix with product.
  • None: disable column.

Add Sub Mega Menu Content with Mega Navigation with Tabs

In the case of tab submenu, you need to take 2 steps:

  1. Ađd Mega Navigation with Tabs to define tab settings

  2. Add Tab menu content.

    Maybe it will limit the content block inside the tab menu in order to make it lighter

  3. Click Save