Plugin Details
Home / Plug-in market / Universal Navigation Bar Decoration Module
Universal Navigation Bar Decoration Module
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
