Documentation — SuperNav

1. Quick start

🖼️Screenshot: menu editor with expanded ⚡ SuperNav panelimg/doc-schnellstart-editor.png · recommended 1400×800

Open the menu editor

WordPress Admin → Appearance → Menus → select the desired menu

Expand a menu item

Click the arrow on a top-level entry
→ At the very bottom appears: ⚡ SuperNav Panel

Basic settings

Field	Value for a features menu
Panel type	Columns with icons & descriptions
Panel width	Wide (~1100px)
"View all" text	View all features
"View all" URL	/features

Save

Click "Save Menu" at the bottom right — only then do all changes take effect.

2. JSON structure: Columns & Links

The JSON content goes into the "Columns & Links" tab in the menu editor.

Tip: Validate your JSON with the JSON tester before pasting it into the menu editor.

Minimal example (1 column, 2 items)

[
  {
    "heading": "Accounting",
    "items": [
      {
        "label": "Invoices",
        "desc": "Legally compliant and effortless invoicing",
        "url": "/invoices",
        "icon": "dashicons-media-document"
      },
      {
        "label": "Orders",
        "desc": "Create convincing quotes",
        "url": "/orders",
        "icon": "dashicons-email-alt"
      }
    ]
  }
]

Full example (2 columns + badge)

[
  {
    "heading": "Accounting",
    "items": [
      {
        "label": "Invoices",
        "desc": "Legally compliant and effortless invoicing",
        "url": "/invoices",
        "icon": "dashicons-media-document",
        "badge": "E-invoicing · Perfectly prepared",
        "badge_url": "/e-invoicing"
      },
      {
        "label": "Orders",
        "desc": "Create convincing quotes",
        "url": "/orders",
        "icon": "dashicons-email-alt"
      },
      {
        "label": "Receipt capture",
        "desc": "Collect all receipts in one place",
        "url": "/receipts",
        "icon": "dashicons-format-image"
      },
      {
        "label": "Banking",
        "desc": "Book incoming payments automatically",
        "url": "/banking",
        "icon": "dashicons-bank"
      },
      {
        "label": "Contact management",
        "desc": "All info on customers and suppliers",
        "url": "/contacts",
        "icon": "dashicons-groups"
      },
      {
        "label": "Products and services",
        "desc": "Maintain hourly rates and stock",
        "url": "/products",
        "icon": "dashicons-products"
      }
    ]
  },
  {
    "heading": "Taxes and reporting",
    "items": [
      {
        "label": "Overview",
        "desc": "Keep track of finances and tax load",
        "url": "/overview",
        "icon": "dashicons-dashboard"
      },
      {
        "label": "VAT return",
        "desc": "Pre-filled and sent directly to the tax office",
        "url": "/vat",
        "icon": "dashicons-chart-bar"
      },
      {
        "label": "P&L statement",
        "desc": "Effortless profit calculation on the side",
        "url": "/pnl",
        "icon": "dashicons-grid-view"
      },
      {
        "label": "Business evaluation",
        "desc": "Assess your company's performance",
        "url": "/evaluation",
        "icon": "dashicons-chart-area"
      },
      {
        "label": "Trial balance",
        "desc": "Trace journal entries in detail",
        "url": "/trial-balance",
        "icon": "dashicons-list-view"
      },
      {
        "label": "Exports",
        "desc": "DATEV and ADDISON compliant",
        "url": "/exports",
        "icon": "dashicons-download"
      },
      {
        "label": "Collaboration",
        "desc": "With your accountant or tax advisor",
        "url": "/collaboration",
        "icon": "dashicons-share"
      }
    ]
  }
]

3. Configuring colors

🖼️Screenshot: 🎨 Colors tab in the menu editorimg/doc-farben-tab.png · recommended 1400×800

The plugin offers 4 levels of color configuration — from global down to a single item.

Level 1 — Global: plugin settings

WordPress Admin → Settings → SuperNav

Applies to all menu items. Color pickers for every area. No code required.

Level 2 — Per menu item: 🎨 Colors tab

In the menu editor → expand the menu item → tab 🎨 Colors

Overrides the global settings for this menu item only.
Leave empty = the global color is used.

Level 3 — Per column: JSON color fields

Directly in the column's JSON (heading level):

[
  {
    "heading": "Accounting",
    "bg_color": "#f0f9ff",
    "heading_color": "#0369a1",
    "icon_color": "#0369a1",
    "icon_bg": "#e0f2fe",
    "link_color": "#111827",
    "link_hover": "#0369a1",
    "desc_color": "#6b7280",
    "badge_bg": "#0284c7",
    "badge_text": "#ffffff",
    "border_radius": 10,
    "padding": 16,
    "items": [...]
  },
  {
    "heading": "Taxes and reporting",
    "bg_color": "#f0fdf4",
    "heading_color": "#166534",
    "icon_color": "#16a34a",
    "icon_bg": "#dcfce7",
    "items": [...]
  }
]

All column color fields:

Field	Description	Example
`bg_color`	Column background color	`#f0f9ff`
`heading_color`	Color of the column heading	`#0369a1`
`icon_color`	Icon color in this column	`#0369a1`
`icon_bg`	Icon background in this column	`#e0f2fe`
`link_color`	Link text color	`#111827`
`link_hover`	Link color on hover	`#0369a1`
`desc_color`	Description text color	`#6b7280`
`badge_bg`	Badge (pill) background	`#0284c7`
`badge_text`	Badge text color	`#ffffff`
`border_radius`	Corner radius of the column in px	`10`
`padding`	Inner spacing of the column in px	`16`

Level 4 — Per item: JSON color fields

Directly on the individual item (items[] level):

{
  "label": "Invoices",
  "desc": "Legally compliant and effortless invoicing",
  "url": "/invoices",
  "icon": "dashicons-media-document",
  "item_bg": "#fef9c3",
  "item_color": "#92400e",
  "item_icon_color": "#d97706",
  "item_badge_bg": "#f59e0b",
  "badge": "NEW",
  "badge_url": "/invoices-new"
}

All item color fields:

Field	Description	Example
`item_bg`	Background color of the item	`#fef9c3`
`item_color`	Text color of the link	`#92400e`
`item_icon_color`	Icon color of this item	`#d97706`
`item_badge_bg`	Badge color of this item	`#f59e0b`

Priority of color levels

Item JSON > column JSON > 🎨 Colors tab (per menu item) > plugin settings (global)

The most specific one wins — leaving a field empty always means: the next level up is used.

4. Sidebar & bottom links

"Sidebar" tab — groups with links on the right

[
  {
    "heading": "Extensions",
    "items": [
      { "label": "Integrations", "url": "/integrations", "icon": "dashicons-randomize" },
      { "label": "Add-ons",      "url": "/addons",       "icon": "dashicons-admin-plugins" },
      { "label": "Mobile app",   "url": "/app",          "icon": "dashicons-smartphone" }
    ]
  }
]

Bottom links (arrows at the bottom of the sidebar)

Separate textarea below the sidebar JSON:

[
  { "label": "Invoicing software",  "url": "/invoicing-software" },
  { "label": "Accounting software", "url": "/accounting-software" },
  { "label": "E-invoicing software","url": "/e-invoicing-software" }
]

5. CTA bar

🖼️Screenshot: CTA bar below the panel (frontend)img/doc-cta-leiste.png · recommended 1400×420

The CTA bar appears as a strip at the bottom edge of the panel.

"CTA bar" tab

{
  "label": "Free tools for the self-employed.",
  "links": [
    { "label": "E-invoice generator", "url": "/tools/e-invoice" },
    { "label": "Invoice generator",   "url": "/tools/invoice" },
    { "label": "All free tools",      "url": "/tools" }
  ]
}

6. Method B: directly via HTML

If you want maximum control or use a page builder:

<div class="lmm-panel-columns">
  <div class="lmm-cols-area">

    <!-- Column with background color -->
    <div class="lmm-col lmm-col--colored" style="background:#f0f9ff;--lmm-heading-color:#0369a1;border-radius:10px;padding:16px">
      <p class="lmm-col-heading">Accounting</p>
      <ul class="lmm-col-items">

        <!-- Item with badge -->
        <li class="lmm-col-item lmm-has-badge">
          <a href="/e-invoicing" class="lmm-badge-link">
            E-invoicing · Perfectly prepared
          </a>
          <a href="/invoices" class="lmm-col-link">
            <span class="lmm-col-icon"><span class="dashicons dashicons-media-document"></span></span>
            <span class="lmm-col-text">
              <span class="lmm-col-label">Invoices</span>
              <span class="lmm-col-desc">Legally compliant and effortless invoicing</span>
            </span>
          </a>
        </li>

        <!-- Item with its own background color -->
        <li class="lmm-col-item lmm-item--colored" style="background:#fffbeb;border-radius:8px;--lmm-icon-color:#d97706">
          <a href="/banking" class="lmm-col-link">
            <span class="lmm-col-icon"><span class="dashicons dashicons-bank"></span></span>
            <span class="lmm-col-text">
              <span class="lmm-col-label">Banking</span>
              <span class="lmm-col-desc">Book incoming payments automatically</span>
            </span>
          </a>
        </li>

      </ul>
    </div>

  </div>

  <!-- Sidebar -->
  <div class="lmm-panel-sidebar">
    <div class="lmm-sidebar-group">
      <p class="lmm-col-heading">Extensions</p>
      <ul class="lmm-sidebar-items">
        <li><a href="/integrations" class="lmm-sidebar-link">Integrations</a></li>
      </ul>
    </div>
    <div class="lmm-sidebar-bottom">
      <a href="/invoicing-software" class="lmm-all-link">Invoicing software →</a>
    </div>
  </div>
</div>

7. JSON field reference and tester

Tip: The JSON tester validates all fields of this reference automatically.

Column level (`[]` array objects)

Field	Type	Required	Description
`heading`	String	—	Column heading (UPPERCASE in the design)
`items`	Array	✅	List of links
`bg_color`	Hex	—	Background color of the column
`heading_color`	Hex	—	Color of the heading
`icon_color`	Hex	—	Icon color for all items of this column
`icon_bg`	Hex	—	Icon background for all items of this column
`link_color`	Hex	—	Link text color
`link_hover`	Hex	—	Link color on hover
`desc_color`	Hex	—	Description text color
`badge_bg`	Hex	—	Badge background for all items of this column
`badge_text`	Hex	—	Badge text color
`border_radius`	Number	—	Corner radius in px (e.g. `10`)
`padding`	Number	—	Inner spacing in px (e.g. `16`)

Item level (`items[]` array objects)

Field	Type	Required	Description
`label`	String	✅	Link text
`url`	String	✅	Target URL
`desc`	String	—	Description line in gray
`icon`	String	—	Dashicons class (e.g. `dashicons-dashboard`)
`image`	String	—	Image URL (only for the "Cards" panel type)
`badge`	String	—	Pill text above the item
`badge_url`	String	—	Target URL of the badge
`item_bg`	Hex	—	Background color of this item
`item_color`	Hex	—	Text color of this item
`item_icon_color`	Hex	—	Icon color of this item
`item_badge_bg`	Hex	—	Badge color of this item

Note: Always write hex colors with #, e.g. "#ef4444". Leaving a field empty ("") or omitting it = the parent color is used.

✓ JSON Tester

Validate and format your panel JSON right here — the editor turns green for valid and red for invalid JSON. No data is transmitted.

Live preview — this is how SuperNav renders this JSON:

8. CSS variables reference

All colors can also be overridden directly as CSS variables.
In Appearance → Theme Editor → style.css or Additional CSS:

:root {
  /* Navbar */
  --lmm-navbar-bg:      #ffffff;
  --lmm-navbar-height:  64px;
  --lmm-navbar-border:  #e5e7eb;

  /* Panel */
  --lmm-panel-bg:       #ffffff;
  --lmm-panel-border:   #e5e7eb;
  --lmm-panel-radius:   12px;
  --lmm-panel-padding:  32px;

  /* Colors */
  --lmm-heading-color:  #ef4444;
  --lmm-link-color:     #111827;
  --lmm-link-hover:     #ef4444;
  --lmm-desc-color:     #6b7280;
  --lmm-icon-color:     #ef4444;
  --lmm-icon-bg:        #fef2f2;
  --lmm-icon-size:      20px;
  --lmm-badge-bg:       #6366f1;
  --lmm-badge-text:     #ffffff;
  --lmm-all-link-color: #6366f1;
  --lmm-cta-bar-bg:     #f9fafb;
  --lmm-cta-bar-link:   #6366f1;
  --lmm-overlay-blur:   2px;
}

9. Plugin settings

WordPress Admin → Settings → SuperNav

Setting	Description	Default
Activation mode	All menus or only specific positions	All menus
Open via	Hover or click	Hover
Open delay	ms until the panel opens	50ms
Close delay	ms until the panel closes (prevents flickering)	200ms
Colors	Global color pickers for all panels	—

10. Theme compatibility

Lireno theme (lireno-v1-3-160)

The Lireno theme uses its own nav function. The following adjustment is needed in inc/landing-i18n.php:

// In the function taxbot_landing_wp_main_top_nav_parts()
// adjust the wp_nav_menu() call:
wp_nav_menu(
    array(
        'theme_location' => 'main-top',
        'container'      => false,
        'menu_class'     => 'tb-main-top-menu lmm-nav-container',
        'fallback_cb'    => false,
        'depth'          => 3,
        'walker'         => class_exists('LMM_Walker') ? new LMM_Walker() : null,
    )
);

And at the end of style.css:

/* SuperNav theme fix */
ul.tb-main-top-menu.lmm-nav-container {
    display: flex !important;
    align-items: center;
    list-style: none;
    margin: 0; padding: 0; gap: 4px;
}
ul.tb-main-top-menu.lmm-nav-container > li.lmm-has-mega,
ul.tb-main-top-menu.lmm-nav-container > li.lmm-has-dropdown {
    position: relative !important;
    list-style: none;
}
ul.tb-main-top-menu.lmm-nav-container > li.lmm-has-mega .lmm-mega-panel {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 4px;
    z-index: 9999 !important;
}
ul.tb-main-top-menu.lmm-nav-container > li.lmm-has-mega.lmm-align-right .lmm-mega-panel {
    left: auto !important;
    right: 0 !important;
}

Other themes

If the plugin does not respond (panel does not open), check in the theme's functions.php whether wp_nav_menu() sets its own walker. If so, use this AI assistant prompt:

The WordPress plugin "SuperNav" is not recognized in my theme.
The theme calls wp_nav_menu() in [FILE] with theme_location '[LOCATION]'.
Please add the walker parameter:
'walker' => class_exists('LMM_Walker') ? new LMM_Walker() : null
and extend menu_class with 'lmm-nav-container'.

11. Common problems

Panel does not open
- Panel type set to "No mega panel"? → Change to "Columns with icons & descriptions"
- Menu saved after the change?
- Browser console: document.querySelectorAll('.lmm-has-mega').length — must be > 0
- Plugin settings: set activation mode to "All menus"

Panel flickers
- Increase the close delay: Settings → SuperNav → Close delay → 300
- Check theme CSS for position: static !important on <li>
- Add the theme fix CSS to style.css (see theme compatibility)

Icons not visible
On pages rendering without wp_head(), Dashicons must be included via the theme filter taxbot_landing_lmm_head_html — see troubleshooting for the full code.

JSON errors (red marker)
- Only use double quotes ", no single quotes '
- No comma after the last item in an array
- Use the { } Format button — it shows syntax errors
- Or use the JSON tester on this site

Badge does not appear
Both fields must be set: "badge" AND "badge_url"

Colors not applied
Check the priority: item JSON > column JSON > 🎨 tab > plugin settings
Write hex colors correctly with #: "#ef4444" not "ef4444"

Panel too far right / left
The plugin detects edge overflow automatically. To force it manually:

/* Always left-aligned */
.lmm-has-mega .lmm-mega-panel { left: 0 !important; right: auto !important; }
/* Always right-aligned */
.lmm-has-mega .lmm-mega-panel { left: auto !important; right: 0 !important; }

12. Dashicons reference

Accounting & finance:
dashicons-media-document    → document/invoice
dashicons-bank              → banking
dashicons-money-alt         → money
dashicons-chart-bar         → bar chart
dashicons-chart-area        → area chart
dashicons-chart-line        → line chart
dashicons-list-view         → list
dashicons-grid-view         → grid
dashicons-download          → export/download

Contacts & people:
dashicons-groups            → customer groups
dashicons-businessman       → individual
dashicons-store             → shop
dashicons-email-alt         → email/orders

Navigation & system:
dashicons-dashboard         → overview
dashicons-admin-tools       → tools
dashicons-admin-plugins     → plugins/add-ons
dashicons-randomize         → integrations
dashicons-smartphone        → mobile app
dashicons-share             → collaboration
dashicons-format-image      → receipt capture
dashicons-products          → products
dashicons-sos               → help/support
dashicons-format-chat       → FAQ/chat

Full list: https://developer.wordpress.org/resource/dashicons/

13. Panel type: cards with images

🖼️Screenshot: cards panel with images (frontend)img/doc-karten-panel.png · recommended 1400×800

This panel type shows cards with real photos, title and description — ideal for target groups, solutions or industries.

Activation

In the menu editor → expand the menu item → Panel type: cards with images

JSON structure: "Columns & Links" tab

The cards go into the first array element under items[]. Every card needs an image field with the full image URL from the WordPress media library.

[
  {
    "heading": "Founding and business phases",
    "items": [
      {
        "label": "For founders",
        "desc": "Start your self-employment with digital accounting right away.",
        "url": "/founders",
        "image": "https://example.com/wp-content/uploads/founders.jpg"
      },
      {
        "label": "For sole proprietors",
        "desc": "Use your time wisely and rely on simple, clear accounting.",
        "url": "/sole-proprietors",
        "image": "https://example.com/wp-content/uploads/sole-proprietors.jpg"
      },
      {
        "label": "For companies",
        "desc": "Keep an eye on your finances and steer your company to success.",
        "url": "/companies",
        "image": "https://example.com/wp-content/uploads/companies.jpg"
      }
    ]
  }
]

You must adjust the image URLs — replace the example URLs with your real media library URLs (see "Uploading images" below).

Without an image: if no image is set, the icon field is displayed as a Dashicon symbol instead. This way the panel can also be used without images.

Uploading images

Images come from the WordPress media library:

WordPress Admin → Media → Add New → upload the image
Click the image → copy the URL from "File URL" on the right
Paste this URL into the JSON as "image": "..."

Recommended image size: 400 × 260 px (16:10 format), JPG or WebP

"Sidebar" tab — right column with groups

[
  {
    "heading": "For the self-employed",
    "items": [
      { "label": "For freelancers",      "url": "/freelancers",      "icon": "dashicons-desktop" },
      { "label": "For small businesses", "url": "/small-businesses", "icon": "dashicons-store" }
    ]
  },
  {
    "heading": "Starting a company",
    "items": [
      { "label": "Found an LLC online", "url": "/founding", "icon": "dashicons-flag" }
    ]
  },
  {
    "heading": "By industry",
    "items": [
      { "label": "Trades",       "url": "/trades",      "icon": "dashicons-admin-tools" },
      { "label": "Car workshop", "url": "/car-repair",  "icon": "dashicons-car" },
      { "label": "Gastronomy",   "url": "/gastronomy",  "icon": "dashicons-food" }
    ]
  }
]

Bottom links (arrow link at the bottom of the sidebar)

[
  { "label": "Discover all industries", "url": "/industries" }
]

Difference to "columns with icons"

Aspect	Columns with icons	Cards with images
Image	No (icon only)	Yes (photo/graphic)
Layout	Horizontal link list	Grid of cards
Ideal for	Features, functions	Target groups, industries
Number of items	5–8 per column	2–4 cards
JSON field	`icon`	`image` (URL)

14. Panel type: featured image + support links

🖼️Screenshot: featured panel with image on the left and resources on the rightimg/doc-featured-panel.png · recommended 1400×800

This panel type shows a team photo or illustration on the left and resource links on the right — ideal for service, support or contact menus.

Activation

In the menu editor → expand the menu item → Panel type: featured image + support links

"Columns & Links" tab — resource columns on the right

[
  {
    "heading": "Resources",
    "items": [
      {
        "label": "Guides",
        "desc": "Valuable knowledge about accounting and finance.",
        "url": "/guides",
        "icon": "dashicons-book"
      },
      {
        "label": "Founders' world",
        "desc": "From the idea to success in self-employment.",
        "url": "/founders-world",
        "icon": "dashicons-flag"
      },
      {
        "label": "Blog",
        "desc": "Interesting articles about self-employment.",
        "url": "/blog",
        "icon": "dashicons-edit"
      },
      {
        "label": "Free invoice template",
        "desc": "Templates for quotes, invoices, reminders.",
        "url": "/templates",
        "icon": "dashicons-media-document"
      }
    ]
  }
]

"Featured" tab — image + support links on the left

Image URL (required for the feature image):

https://example.com/wp-content/uploads/team.jpg

Support links (appear below the image):

[
  { "label": "Help center",               "url": "/help", "icon": "dashicons-sos" },
  { "label": "Frequently asked questions","url": "/faq",  "icon": "dashicons-format-chat" }
]

Recommended image size

Format: square or 4:3
Size: 280 × 280 px to 400 × 300 px
Type: JPG or WebP, team photo or illustration

15. Multilingual (i18n)

🖼️Screenshot: Tools → Menu translations with loaded keysimg/doc-i18n-uebersetzungen.png · recommended 1400×800

SuperNav supports full multilingualism for DE/EN/FR/IT. There are two systems working together:

System 1 — translating menu titles (🌐 field in the menu editor)

For the top-level menu items (e.g. "Features", "Solutions"):

Appearance → Menus → expand the menu item
At the very bottom: 🌐 Translations (optional)
Enter the translations directly:

🇬🇧 English:  Features
🇫🇷 Français: Fonctionnalités
🇮🇹 Italiano: Funzionalità

Save the menu. Leave empty = the WP navigation label (default language) is used.

System 2 — translating panel contents (menu translations module)

For all texts inside the panel (column headings, labels, descriptions, badges):

WordPress Admin → Tools → Menu translations
Select the menu → click Load
The module automatically scans all JSON texts from the SuperNav panels
Enter the EN/FR/IT translations
Save

The module automatically creates keys for all texts:

Context	DE reference	EN	FR
0.heading	Buchhaltung	Accounting	Comptabilité
0.items.0.label	Rechnungen	Invoices	Factures
0.items.0.desc	Rechtskonform…	Legally compliant…	Conformément…
1.heading	Steuern und Auswertung	Tax and Reporting	Fiscalité et Analyses

Import/export workflow (recommended for many texts)

The fastest way to translate all panel texts:

Export

Tools → Menu translations
Select the menu → Load
Click Excel (.xlsx) or Google Sheets (CSV)
The file is downloaded with all source texts as reference

Translate

Fill in the EN/FR/IT columns in Excel
Or: import the CSV into Google Sheets → translate → export
Or: have the Excel file translated by DeepL or an AI assistant

Import

Upload the translated file under Choose file
Select the mode: Merge (keep existing keys) or Replace
Click Import from file
Done — all translations are active immediately

Tip: After every menu change (new items in the JSON), click Load again and re-export — this way all new texts end up in the Excel file.

Important: re-scan after menu changes

If you change JSON contents in the menu editor (new items, changed labels), click Load again in the module to capture the new texts.

Activating a language

The language is controlled via the ?lang= URL parameter:

https://example.com/?lang=de   → German (default)
https://example.com/?lang=en   → English
https://example.com/?lang=fr   → French
https://example.com/?lang=it   → Italian

Overview: what is translated where

Element	System	Where to configure
Menu titles	🌐 field	Menu editor → menu item
Panel headings	Menu translations module	Tools → Menu translations
Item labels	Menu translations module	Tools → Menu translations
Item descriptions	Menu translations module	Tools → Menu translations
Badge texts	Menu translations module	Tools → Menu translations
Sidebar links	Menu translations module	Tools → Menu translations
CTA bar	Menu translations module	Tools → Menu translations

16. Sidebar styling: icons, colors & typography

🖼️Screenshot: styled sidebar with icon chipsimg/doc-sidebar-styling.png · recommended 900×700

The sidebar (right column in the panel) can be customized in two ways:

Method A — via JSON (recommended, per sidebar group)

In the "Sidebar" tab of the menu editor:

[
  {
    "heading": "Extensions",
    "bg_color": "#f5f3ff",
    "heading_color": "#7c3aed",
    "link_color": "#4c1d95",
    "link_hover": "#7c3aed",
    "icon_color": "#7c3aed",
    "icon_bg": "#ede9fe",
    "font_weight": "600",
    "items": [
      {
        "label": "Integrations",
        "url": "/integrations",
        "icon": "dashicons-randomize"
      },
      {
        "label": "Add-ons",
        "url": "/addons",
        "icon": "dashicons-admin-plugins"
      },
      {
        "label": "Mobile app",
        "url": "/app",
        "icon": "dashicons-smartphone"
      }
    ]
  }
]

All sidebar group color fields:

Field	Description	Example
`bg_color`	Background color of the group	`#f5f3ff`
`heading_color`	Color of the group heading	`#7c3aed`
`link_color`	Link text color	`#4c1d95`
`link_hover`	Link color on hover	`#7c3aed`
`icon_color`	Icon color	`#7c3aed`
`icon_bg`	Icon background	`#ede9fe`
`font_weight`	Font weight	`400` / `500` / `600` / `700`
`border_radius`	Corner radius of the group in px	`10`
`padding`	Inner spacing in px	`16`

Method B — via CSS (global for all sidebars)

The CSS goes at the very end of Appearance → Theme Editor → style.css:

/* ── Sidebar styling ─────────────────────────────── */

/* Background of the whole sidebar */
.lmm-panel-sidebar {
    background: #f5f3ff;
    border-radius: 10px;
    padding: 16px !important;
    margin-left: 20px !important;
}

/* Sidebar heading */
.lmm-panel-sidebar .lmm-col-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #7c3aed;
}

/* Sidebar links — font, color, weight */
.lmm-panel-sidebar .lmm-sidebar-link {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Satoshi', sans-serif;
    color: #4c1d95;
    gap: 10px;
}

/* Sidebar link hover */
.lmm-panel-sidebar .lmm-sidebar-link:hover {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
}

/* Sidebar icons */
.lmm-panel-sidebar .lmm-sidebar-link [class^="dashicons"] {
    color: #7c3aed;
    font-size: 16px;
}

/* Bottom links (arrow links) */
.lmm-sidebar-bottom .lmm-all-link {
    font-size: 13px;
    font-weight: 700;
    color: #7c3aed;
}

.lmm-sidebar-bottom .lmm-all-link:hover {
    background: rgba(124, 58, 237, 0.07);
}

Combining methods A + B

Recommendation: method A for colors per sidebar group, method B for global font settings (font-size, font-family, font-weight) that should be the same everywhere.

Full example: sidebar with all options

[
  {
    "heading": "Extensions",
    "bg_color": "#f0fdf4",
    "heading_color": "#166534",
    "link_color": "#14532d",
    "link_hover": "#16a34a",
    "icon_color": "#16a34a",
    "icon_bg": "#dcfce7",
    "font_weight": "600",
    "font_size": 14,
    "font_family": "'Satoshi', sans-serif",
    "font_style": "normal",
    "letter_spacing": 0.02,
    "text_transform": "none",
    "border_radius": 10,
    "padding": 14,
    "items": [
      {
        "label": "Integrations",
        "url": "/integrations",
        "icon": "dashicons-randomize",
        "color": "#166534"
      },
      {
        "label": "Add-ons",
        "url": "/addons",
        "icon": "dashicons-admin-plugins"
      },
      {
        "label": "Mobile app",
        "url": "/app",
        "icon": "dashicons-smartphone"
      }
    ]
  }
]

Tip: Not all fields have to be set — leave them empty and the global setting is used. Only set the fields that should differ from the default.

Per-item color (single link)

With "color" a single link can get a different color:

{
  "label": "Integrations",
  "url": "/integrations",
  "icon": "dashicons-randomize",
  "color": "#dc2626"
}

Version history

Version	Changes
v2.7.0	Full i18n integration with the menu translations module (panel contents) and 🌐 field (menu titles)
v2.6.0	Direct translation fields (EN/FR/IT) per menu item in the menu editor
v2.3.0	Mobile accordion navigation
v2.2.0	Colors per column and per item via JSON (`bg_color`, `item_bg`, etc.)
v2.1.0	🎨 Colors tab in the menu editor with color picker per menu item
v2.0.0	Complete rewrite: robust hover, automatic panel positioning, plugin settings page
v1.0.0	First release

SuperNav v3.10.6 — a product by KITech

As of Core 3.10.6 — this documentation will be updated once the ongoing re-engineering is complete. The example catalog is currently available in German only.

1. Quick start

Open the menu editor

Expand a menu item

Basic settings

Save

2. JSON structure: Columns & Links

Minimal example (1 column, 2 items)

Full example (2 columns + badge)

3. Configuring colors

Level 1 — Global: plugin settings

Level 2 — Per menu item: 🎨 Colors tab

Level 3 — Per column: JSON color fields

Level 4 — Per item: JSON color fields

Priority of color levels

4. Sidebar & bottom links

"Sidebar" tab — groups with links on the right

Bottom links (arrows at the bottom of the sidebar)

5. CTA bar

"CTA bar" tab

6. Method B: directly via HTML

7. JSON field reference and tester

Column level ([] array objects)

Item level (items[] array objects)

✓ JSON Tester

8. CSS variables reference

9. Plugin settings

10. Theme compatibility

Lireno theme (lireno-v1-3-160)

Other themes

11. Common problems

12. Dashicons reference

13. Panel type: cards with images

Activation

JSON structure: "Columns & Links" tab

Uploading images

"Sidebar" tab — right column with groups

Bottom links (arrow link at the bottom of the sidebar)

Difference to "columns with icons"

14. Panel type: featured image + support links

Activation

"Columns & Links" tab — resource columns on the right

"Featured" tab — image + support links on the left

Recommended image size

15. Multilingual (i18n)

System 1 — translating menu titles (🌐 field in the menu editor)

System 2 — translating panel contents (menu translations module)

Import/export workflow (recommended for many texts)

Export

Translate

Import

Important: re-scan after menu changes

Activating a language

Overview: what is translated where

16. Sidebar styling: icons, colors & typography

Method A — via JSON (recommended, per sidebar group)

Method B — via CSS (global for all sidebars)

Combining methods A + B

Full example: sidebar with all options

Per-item color (single link)

Version history

Column level (`[]` array objects)

Item level (`items[]` array objects)