How to Add Dropdown Navigation Menus to Your Website

How to Add Dropdown Navigation Menus to Your Website

By Michael Thompson

November 19, 2024 at 08:17 PM

Drop-down menus provide an organized way to display nested links in your website's navigation. When visitors hover over navigation text, these menus reveal additional page options below.

Creating a Drop-down Menu

  1. Click the + icon in the pages menu
  2. Select "Dropdown"
  3. Enter a title for your drop-down menu
  4. Add pages by:
    • Dragging existing pages into the dropdown area
    • Clicking "Add Page" below the dropdown
    • Rearranging pages using drag and drop

Key Features

  • Each dropdown creates a single menu
  • Multiple dropdowns can be added to navigation
  • Nested dropdowns (dropdowns within dropdowns) are not supported
  • Clicking a dropdown's URL redirects to its first page

Display Behavior

Version 7.1:

  • Menu items appear on hover
  • Dropdown titles aren't clickable
  • Mobile devices show collapsed menus that open on tap

Background Color Settings

The dropdown background color follows:

  • Solid color: Header settings or site-wide section background
  • Gradient: Header settings
  • Adaptive: First section's background design

Managing Dropdowns

To delete a dropdown:

  • Desktop: Hover over dropdown, click trash icon, confirm deletion
  • Mobile App: Tap More > Pages > Select dropdown > Tap trash icon > Confirm

Important Notes

  • Adding an index page requires using a Link with URL redirect
  • Deleting a dropdown removes all contained pages
  • Product categories create separate navigation for shop pages
  • Version 7.1 supports nested subcategory menus for shop pages

All page types except index pages can be added to dropdowns. When empty, dropdowns display "This folder does not contain any pages."

Related Articles

Previous Articles