Skip to content

Frontend Menus

Purpose

Create and manage navigation menus for your storefront (header, footer, sidebar). Build hierarchical menu structures with links to categories, products, pages, and custom URLs.

Accessing Frontend Menus

Navigate to: Marketing & Content > Frontend Menus from the sidebar

List View

Frontend Menus List

The list displays all navigation menus configured for your store.

Table Columns

Key

  • Format: Text (unique identifier)
  • Purpose: Internal key identifying this menu location (header, footer, sidebar, etc.)

Name

  • Format: Text (up to 50 characters)
  • Purpose: Display name for this menu

Row Actions

  • Edit: Modify menu items and structure

Bulk Actions

  • Export: Export menu structure to Excel/CSV

Creating a Frontend Menu

Menus are typically pre-configured by system administrators. To modify existing menus, click Edit.

Form Fields

Key

  • Type: Text (read-only)
  • Purpose: System identifier for this menu location
  • Examples: "main-header", "footer-links", "sidebar-menu"

Name Required

  • Type: Text input (max 50 characters)
  • Purpose: Display name for the menu
  • Translatable: Yes - provide in each language

Managing Menu Items

Edit Frontend Menu

Click the Items tab in the edit form to manage menu items for this menu.

Shows all items in this menu with columns:

  • Name: Menu item label
  • Parent: Parent menu item (for nested items)
  • URL: Link destination
  • Category: Related category (if link type is category)
  • Product: Related product (if link type is product)
  • Page: Related page (if link type is page)
  • Icon Type: Icon format (SVG or image)
  • Order: Display sequence
  • Hidden: Whether item is visible (eye/eye-slash icon for inline toggle)

Adding Menu Items

Click Create in the Items relation manager:

Custom URL
  • Label: Menu item text
  • Icon: SVG code or image upload
  • URL: Custom link destination
  • Open in New Tab: Toggle for target="_blank"
  • Label: Menu item text
  • Icon: SVG code or image upload
  • Category: Select category to link to
  • Note: URL auto-populated from category
  • Label: Menu item text
  • Icon: SVG code or image upload
  • Product: Select product to link to
  • Note: URL auto-populated from product
Page Link
  • Label: Menu item text
  • Icon: SVG code or image upload
  • Page: Select CMS page to link to
  • Note: URL auto-populated from page

Icon Management

For each menu item, choose one:

Option 1: SVG Icon

  • Paste SVG code directly into SVG Code field
  • Includes helpful link to Flowbite Icons and CopyIcon tools
  • Renders inline in menu

Option 2: Image Upload

  • Upload custom image (jpg, png, gif)
  • Stored in menu-icons directory
  • Displays as image in menu

Label Required

  • Type: Text input
  • Purpose: Text displayed in menu
  • Translatable: Yes

Parent Optional

  • Type: Dropdown
  • Purpose: Create nested submenu under parent item
  • Displays: All top-level items available as parents

Sort Order

  • Type: Number input
  • Purpose: Display sequence (lower numbers appear first)

Hidden

  • Type: Toggle switch
  • Purpose: Show/hide this menu item
  • Inline Toggle: Click eye/eye-slash icon to toggle without opening edit

Build hierarchical menus:

Main Menu
  ├── Home (Custom URL)
  ├── Shop (Category Link)
  │   ├── Electronics (Product Link)
  │   └── Clothing (Product Link)
  ├── About Us (Page Link)
  └── Contact (Custom URL)

When viewing menu items:

  • Visibility Filter: Show Hidden or Visible items

Editing Menu Items

Click any menu item row to edit or click the edit icon in the Items manager.

Menus support multiple languages:

  1. Edit the menu
  2. Use the Locale dropdown (top right of form)
  3. Switch between languages
  4. Update menu name and item labels for each language

Key Information

  • Hierarchical Structure: Build nested menus up to multiple levels
  • Multiple Link Types: Custom URLs, categories, products, or pages
  • Icon Options: SVG code or uploaded images
  • Visibility Control: Hide/show items without deleting
  • Multi-Language: Translate menu labels and structure per language
  • Custom Ordering: Control item display sequence
  • Translatable: Menu names and item labels support all store languages
  • Dynamic Links: Category/product/page links auto-update if destinations change

Configure store branding in System Settings:

  • Shop Title - Store name displayed in navigation
  • Shop Logo - Logo displayed in header/menu areas
  • Categories - Link menu items to categories
  • Products - Link menu items to products
  • Pages - Link menu items to CMS pages