A submenu groups related navigation destinations beneath a parent item. Keep the hierarchy shallow and test both touch and keyboard access, because a dropdown that only works when a mouse hovers over it excludes other visitors.
IN THIS ARTICLE
01 Plan a clear relationship
Choose a parent label that describes its children, such as Services with Hosting and Website care beneath it. Decide whether the parent also leads to an overview page or primarily opens the submenu. Visitors should not have to guess which interaction will occur.
Page parent relationships and menu nesting are separate controls. A page can be nested in navigation without changing its URL hierarchy, so avoid moving published pages merely to create a dropdown.
02 Add the submenu
- Open the intended Navigation block or menu in the Site Editor.
- Select the parent link and use the available submenu action, or add a Submenu block in the Navigation structure.
- Add the child destinations and arrange their order in List View.
- Review the navigation settings for submenu interaction and the visible indicator.
- Save the menu and check it in the actual header layout.
03 Test the interaction
Use a mouse, keyboard and touch device where available. Confirm that the parent and child links can be reached, that the submenu does not disappear before a user can select an item, and that focus remains visible.
Open the mobile overlay and test the same hierarchy there. Long labels should wrap sensibly without hiding the close control. Avoid several deeply nested levels when a clear overview page would offer a simpler route.
What should I check when a dropdown menu behaves incorrectly?
If a child appears at the top level, inspect its indentation and parent in List View. If the submenu opens behind other content, investigate theme stacking and positioning rather than adding unrelated duplicate links.
If the parent link unexpectedly navigates away instead of exposing children, review the chosen interaction mode and whether a separate toggle is provided. Keep the behaviour consistent throughout the menu. After changing a destination URL, test both the desktop submenu and mobile version so cached or alternate menu objects do not preserve an outdated link.