Links

Mega menu

Learn to elevate your store navigation with a seamless and user-friendly mega menu created with FoxKit
A mega menu is an expanded and visually appealing menu that displays multiple navigation options and subcategories in a single dropdown panel.
A well-designed mega menu simplifies the browsing process for your customers.
  • It provides a clear overview of your store's product categories and subcategories, allowing users to quickly find what they want.
  • It reduces the number of clicks required to navigate through your site, enhancing user satisfaction and encouraging exploration of your product offerings.
Example of a mega menu from Decathlon

Create a mega menu

Steps:
  1. 1.
    In FoxKit > FoxKit power > choose Mega menu
  2. 2.
    Select Create menu
You can choose 1 of the 2 layout options for your mega menu. It can be:
  • Horizontal menu: In a horizontal mega menu, the parent menu items stand at the top; and sub-items, or child menu items, spread out underneath them.
  • Vertical menu: In a vertical mega menu, the parent menu items stand on the left side; and sub-items, or child menu items, branch out from them to the right.
Each menu item can be chosen as:
  • Pure text link: Where you link the item to a certain collection, product, landing page, etc.
  • Text link with image banner: Menu banner can attract customer's attention and communicate your messages more effectively.

Style your mega menu

To change the styling of the mega menu, choose Appearance.
Some details of the mega menu that you can change are:
  • Menu layout
    • Horizontal
    • Vertical
  • Menu width
    • Fill container
    • Fixed width
  • Menu bar background: Change color
  • Menu text color
  • Menu text hover color
  • Space between items
  • Submenu design
    • Background: Change color
    • Text: Change color
    • Text hover: Change color

Change the settings of your mega menu

  • Title
  • Render method - we recommend you don't change this option if you're not sure what it does
    • Custom element
    • Replace by selectors