Standard Dropdowns and Mobile Navigation
Standard Dropdowns
A top-level page configured as a standard dropdown displays its child pages using the active theme's normal dropdown styling.
Top Navigation Bar PLUS does not impose a separate visual design on standard dropdowns.
The active frontend theme controls:
- Text colors
- Background colors
- Borders
- Border radius
- Shadows
- Hover states
- Focus states
- Active states
Nested Navigation
Additional page levels can be displayed when the configured navigation depth allows them.
The availability of nested pages also depends on:
- Page permissions
- Exclude from Nav
- Exclude Subpages from Nav
- Top Navigation Bar PLUS – Hide Child Pages
Mobile Behavior
On mobile devices, standard dropdowns and mega menus use the same nested navigation structure.
Desktop-only mega-menu features are not displayed on mobile, including:
- Multi-column layout
- Desktop mega-menu widths
- Desktop mega-menu positions
- Optional stack content
Child pages remain available through expandable nested dropdowns.
This produces a compact navigation structure that follows the frontend theme and avoids displaying a desktop mega-menu panel on a narrow screen.
Mobile Action Order
Search, account, and cart actions can use a separate mobile quick-action order.
The language selector remains available inside the expanded mobile navigation.
Responsive Breakpoint
Desktop mega-menu behavior is used at the Bootstrap desktop breakpoint.
Below that breakpoint, the block removes desktop-specific width and positioning values and renders the navigation as nested mobile dropdowns.
Theme Requirements
The active frontend theme should provide Bootstrap 5-compatible navigation and dropdown styles.
Themes with heavily customized or non-standard dropdown markup may require additional site-specific CSS.
