Skip to main content

Add Submenus and Dropdown Menus

💡 In this guide, you will add dropdown items and normal menu items to the navigation. Estimated time: 3 minutes.

AllinCMS admin page designer - use an AI prompt to replace a normal menu with a dropdown category menu

Check the menu type and keep dropdowns limited

If the default template is not using a dropdown menu, do not edit only the labels. First enter this AI prompt: Replace it with a menu that supports dropdown categories, not a dropdown card style, so the system can add or replace the menu with a dropdown menu module.

Use dropdowns to group similar destinations, such as product categories under Products and About or Contact pages under Company. Consider grouping only when the top menu exceeds 6 items, and keep the first round to 1 or 2 dropdowns.

Find the page first​

Path: AllinCMS Workspace site list → Target site → Enter Admin → Themes → Current theme pages → Home or target page

1Enter the target site adminFind the site you want to edit and click Enter Admin
AllinCMS Workspace site list - the Enter Admin button is marked with a red box
2Open Themes and click PagesClick Pages on the card for the active theme
AllinCMS admin theme list - the Themes entry and Pages button on the active theme card are marked
3Find Home or the target pageFind Home or the page you want to edit in the current theme
AllinCMS admin theme page list - the Themes menu and target pages such as Home, Products, and Posts are visible

Overview​

1Select navigation
2Open Props
3Add dropdown item
4Add menu
5Enter label and link

1. Select the Navigation​

Open the page designer and click the top navigation area or menu component. The right-side Props panel appears after selection.

AllinCMS admin navigation menu Props panel - the right-side Props panel shows Add dropdown item and Add menu actions

2. Add a Dropdown Item​

In Props, find + Add dropdown item.

Use this for menu groups such as:

  • Products: product categories.
  • Solutions: solution pages.
  • Company: About, Contact, and News.

After adding it, enter the menu label and target links inside the dropdown.

Common structure:

Products
  - Wireless Earphones
  - Bluetooth Speakers
  - Smart Watches

3. Add a Normal Menu Item​

In Props, find + Add menu.

Use this for regular navigation items such as:

About Us
Contact Us
OEM

If the menu should open a page, set Target to Custom and enter the real path, such as:

/contact-us

4. Check the Frontend​

After setup, preview or publish the page and check:

  • The new menu item appears.
  • The dropdown expands when hovered or clicked.
  • Each menu link opens the correct page.
It is complete only when it works on mobile too

Desktop dropdowns are not enough. Open the mobile menu and test once.

Pitfalls​

MistakeResultHow to avoid it
Label entered but no linkClick does nothingSet both label and Target
Guessing linksMay show 404Copy the real page path
Too many dropdown itemsVisitors cannot scan itGroup and keep it concise
Only testing desktopMobile menu may be hard to useTest on mobile too

Next​

📌 Redirect Links - read this if you are not sure how to fill links.