Universal Navigation Decoration Module

Overview

Universal Navigation is a plugin that adds a universal navigation bar display module to the admin "Design → Decoration" builder. You can either select the system's existing site navigation menu (maintained under "Design → Navigation Menu") or build a custom menu directly within the module, then display it anywhere on the homepage as a fully styleable navigation bar with second-level/image dropdowns. The navigation bar supports extensive style customization: bold text, font size, content padding, alignment, border display (none/top-bottom/all/top/bottom), as well as text, background, and border colors. Perfect for homepage top/bottom navigation bars, campaign/topic navigation, category shopping guides, and similar use cases.

Key Features

🧭 Dual Menu Sources

Mode	Description
Site navigation menu	References the system's existing navigation menu (maintained under Design → Navigation Menu) – changes sync automatically
Custom menu	Build your own menu within the module – supports multi-level items and submenus (dropdown), independent per module instance

🎨 Rich Style Customization

Option	Description
Module width	Narrow (container) / Wide (container-fluid) / Full (w-100)
Bold text	Toggle to bold menu text
Font size	Configurable from 12 to 28px
Content padding	Independent 4-side padding (top/right/bottom/left), range 0–200px
Alignment	Left / Center / Right (PC only)
Border display	None / Top-bottom / All sides / Top only / Bottom only
Text color	Custom menu text color
Background color	Custom navigation bar background color (supports opacity)
Border color	Custom border color (supports opacity)

📋 Site Menu Features

Feature	Description
Auto-sync	Shares data with the system navigation menu – maintain once, use everywhere
Second-level dropdown	Supports multi-column dropdown menus with images
Badge support	Menu items can display badges (e.g., "New", "Hot")

🔧 Custom Menu Features

Feature	Description
Drag-and-drop sorting	Menu items support drag-and-drop reordering
Multi-level menu	Supports top-level menu + second-level submenu (dropdown)
Independent configuration	Each module instance can have its own independent menu structure
Multi-language support	Menu text supports multi-language configuration

💡 Dropdown Menu Features

Feature	Description
Smart positioning	Dropdown automatically detects viewport boundaries – flips to right-align when overflow occurs
Responsive adaptation	Mobile: navigation bar scrolls horizontally, dropdown switches to click-to-expand
Hover switching	PC: dropdown expands on hover; Mobile: expands on click

Technical Features

✅ Dual menu sources : Site menu (auto-sync) or custom menu (independent builder)
✅ Rich style customization : Text, background, border, padding, alignment – fully adjustable
✅ Smart dropdown positioning : Automatically detects viewport edges to prevent dropdown overflow
✅ Hover underline animation : Underline expands from center to both sides on menu item hover
✅ Responsive mobile : Navigation bar scrolls horizontally on mobile – dropdown switches to accordion-style click-to-expand
✅ Drag-and-drop sorting : Custom menu items support drag-and-drop reordering
✅ Multi-language support : Menu text supports independent multi-language configuration
✅ Any theme compatible : Frontend views are plugin-bundled – styles use CSS variables to adapt to themes
✅ Full design editor support : Real-time preview – intuitive menu selection and management

Use Cases

Homepage top/bottom navigation bar
Campaign / topic page navigation bar
Category shopping guide bar
Brand zone entry
Help center / documentation navigation

Menu

Account

Universal Navigation Bar Decoration Module