The Menu Component displays a list of menu items and is used to build navigation structures such as headers, footers, sidebars, mobile menus, or mega‑menus.

To activate the component, add the attribute:

data-v-component-menu

The component supports nested (recursive) menu structures and automatically loads the correct menu based on menu_id, slug, site, and language.

Component Options

All options are added as HTML attributes using the data-v-* syntax.

Option Attribute Description Default
start data-v-start Starting offset for pagination 1
limit data-v-limit Maximum number of menu items to display 1000
menu_id data-v-menu_id ID of the menu to load null
slug data-v-slug Menu slug (useful for multi‑site setups) null
site_id data-v-site_id Site ID to load the menu from Current site
language_id data-v-language_id Language ID for menu item names/content Current language
default data-v-default Preselect a specific menu; if not set, uses site default null

Multi‑Site Behavior

Multiple sites can use the same menu slug (e.g., main-menu) but have different menu content.
This allows a shared theme to load a site‑specific menu simply by using:

data-v-slug="main-menu"

Component Structure & Properties

Inside the component, menu items are rendered using:

  • data-v-menu-items — container for the list
  • data-v-menu-item — repeatable element for each menu entry
  • data-v-menu-item-recursive — container for nested child items

Each menu item exposes the following attributes:

Property Attribute Description
name data-v-menu-item-name Menu item label
slug data-v-menu-item-slug Slug for post/page/product items
content data-v-menu-item-content Custom content (for text or HTML menu items)
parent_id data-v-menu-item-parent_id Parent menu item ID (for nested menus)
menu_item_id data-v-menu-item-menu_item_id Internal menu item ID
children data-v-menu-item-children Number of child items
language_id data-v-menu-item-language_id Language ID for multilingual menus
type data-v-menu-item-type Menu item type: link, text, post, page, product, home, blog, shop
img data-v-menu-item-img Menu item image (optional)
sort_order data-v-menu-item-sort_order Display order
url data-v-menu-item-url Final URL for the menu item

These properties allow full control over how each menu item is displayed.

Example Usage

<div class="collapse navbar-collapse" 
     id="navbar" 
     data-v-component-menu="header" 
     data-v-slug="main-menu">

  <ul class="navbar-nav" data-v-menu-items>

    <!-- Top-level menu item -->
    <li class="nav-item" data-v-menu-item>

      <a class="nav-link" data-v-menu-item-url>
        <span data-v-menu-item-name></span>
        <span data-v-menu-item-content>
          <img src="/media/vvveb.svg" height="24" alt="" class="me-2">Mega menu
        </span>
      </a>

      <!-- Recursive submenu -->
      <div class="dropdown-menu" data-v-menu-item-recursive>
        <div data-v-menu-item class="nav-item">
          <a class="dropdown-item" data-v-menu-item-url>
            <span data-v-menu-item-name data-v-if-not="category.type = 'text'"></span>
            <span data-v-menu-item-content data-v-if="category.content">
              <img src="/media/vvveb.svg" height="24" alt="" class="me-2">Mega menu
            </span>
          </a>
        </div>
      </div>

    </li>

    <!-- Another menu item -->
    <li class="nav-item" data-v-menu-item>
      <a class="nav-link" data-v-menu-item-url>
        <span data-v-menu-item-name>Contact</span>
      </a>
    </li>

  </ul>
</div>

This example demonstrates:

  • A main navigation menu
  • Recursive dropdown support
  • Custom content inside menu items
  • Automatic URL generation