Menu Placeholders
The HTML output(after extracting the original placeholders from builder placeholder) containing a menu will typically have the following structure:
<div class="brz-menu__container brz-css-u3hlv brz-css-s84yA"
data-mmenu-id="#tczwcqemluqcvcmoetccxkqggtvunlepzbmg_edd84ee2-e62e-460e-8975-55b20e61f8e3"
data-mmenu-position="position-left" data-mmenu-title="Main Menu" data-mmenu-stickytitle="on"
data-mmenu-closingicon="%7B%22desktop%22%3A%22off%22%2C%22tablet%22%3A%22off%22%2C%22mobile%22%3A%22off%22%7D"
data-brz-custom-id="tczwcqemluqcvcmoetccxkqggtvunlepzbmg">{{group}}
<nav
data-mods="%7B%22desktop%22%3A%22horizontal%22%2C%22tablet%22%3A%22horizontal%22%2C%22mobile%22%3A%22horizontal%22%7D"
class="brz-menu brz-menu__preview brz-css-p0BBO brz-css-fUTFM">{{menu_item_icon_value
itemId="30385160-5ec3-44fd-85dc-251ccad495fb"}}
<svg class="brz-icon-svg align-[initial]">
<use href="/api/icons/fa/js-square.svg#fa_icon"></use>
</svg>
{{end_menu_item_icon_value}}{{mega_menu_value itemId="30385160-5ec3-44fd-85dc-251ccad495fb"}}
<div class="brz brz-mega-menu__portal brz-css-gVQUy"
<div id="dbEHiVkLEsaR" class="brz-mega-menu brz-css-jjT22 brz-css-xuxve" data-uid="dbEHiVkLEsaR"
data-brz-custom-id="dbEHiVkLEsaR">
<div class="brz-bg">
<div class="brz-bg-color"></div>
</div>
<div class="brz-container brz-css-eCTFz">
<div id="" class="brz-css-ovyIa brz-wrapper">
<div class="brz-rich-text brz-rich-text__custom brz-css-sAXgx" data-brz-custom-id="ui92ZMsjw4kT">
<div data-brz-translate-text="1"><p class="brz-tp-lg-paragraph brz-css-c4H8t" data-uniq-id="wLz_q" data-generated-css="brz-css-lcImH">
<span>The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.</span>
</p></div>
</div>
</div>
</div>
</div>
</div>
{{end_mega_menu_value}}
<ul class="brz-menu__ul">{{menu_loop menuId="myMenuId"}}
<li data-menu-item-id="{{menu_item_uid}}" class="brz-menu__item {{menu_item_classname}} brz-menu__item-dropdown">
<a class="brz-a" target="{{menu_item_target}}" href="{{menu_item_href}}" title="{{menu_item_attr_title}}">{{menu_item_icon}}<span
class="brz-span">{{menu_item_title}}</span></a>{{mega_menu}}{{menu_loop_submenu}}
<ul class="brz-menu__sub-menu"
style="--offset: 5px; position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(0px, 68px);"
data-popper-placement="bottom-start">{{menu_loop recursive="1"}}{{end_menu_loop}}
</ul>
{{end_menu_loop_submenu}}
</li>
{{end_menu_loop}}
</ul>
</nav>
{{end_group}}
</div>
Below is a detailed explanation of each placeholder used in the menu HTML structure:
Group Placeholders
-
{{group}}- Indicates the start of a menu group.
- A menu group contains a collection of menu items that are related or grouped together for a specific purpose.
-
{{end_group}}- Marks the end of the current menu group.
- Everything between
{{group}}and{{end_group}}is considered part of the group.
Menu Loop Placeholders
-
{{menu_loop menuId="myMenuId"}}- Starts iterating over the menu items for the menu identified by
menuId. - Example: If
menuId="mainMenu", this loop processes all items in the "mainMenu." - The optional attribute
recursive="1"can be included to iterate through submenus.
- Starts iterating over the menu items for the menu identified by
-
{{end_menu_loop}}- Marks the end of the iteration through the menu items.
-
{{menu_loop_submenu}}- Starts iterating over the submenu items of the current menu item.
- Submenus are nested menus under a primary menu item.
-
{{end_menu_loop_submenu}}- Marks the end of the submenu iteration.
Menu Item-Specific Placeholders
-
{{menu_item_classname}}- Contains the class name of the current menu item.
- Used to style or customize the menu item's appearance.
-
{{menu_item_uid}}- A unique identifier (UID) for the current menu item.
- Example:
menu_item_uid="30385160-5ec3-44fd-85dc-251ccad495fb". - Useful for uniquely identifying and referencing each item.
-
{{menu_item_href}}- The hyperlink (URL) for the current menu item.
- Example:
<a href="{{menu_item_href}}">generates<a href="https://example.com">.
-
{{menu_item_target}}- The target attribute of the menu item's link.
- Controls how the link opens. Common values:
_self(default): Opens in the same tab._blank: Opens in a new tab.
-
{{menu_item_title}}- The title or text label of the menu item.
- Example:
{{menu_item_title}}renders the name displayed on the menu.
-
{{menu_item_icon}}- Specifies the icon for the current menu item.
- Example:
<span>{{menu_item_icon}}</span>could render an icon like a folder or a home symbol.
Mega Menu Placeholders
-
{{mega_menu}}- Contains the content for the mega menu.
- A mega menu is a larger dropdown-style menu that displays additional information or links.
-
{{mega_menu_value itemId="someItemId"}}- Starts defining the content for a specific mega menu item, identified by its
itemId. - Example:
itemId="30385160-5ec3-44fd-85dc-251ccad495fb"is used to specify the item content.
- Starts defining the content for a specific mega menu item, identified by its
-
{{end_mega_menu_value}}- Marks the end of the content for the specified mega menu.
Menu Item Icon Placeholders
-
{{menu_item_icon_value itemId="someItemId"}}- Defines the icon for a specific menu item, identified by its
itemId. - Example: If
itemId="12345", the icon displayed is linked to this ID.
- Defines the icon for a specific menu item, identified by its
-
{{end_menu_item_icon_value}}- Marks the end of the definition for the specified menu item icon.
For replacing the placeholders in the menu HTML structure, you can follow these examples : https://github.com/EasyBrizy/builder/tree/main/packages/brizy-content-placeholder/src/examples/menu https://github.com/EasyBrizy/builder/blob/main/packages/brizy-content-placeholder/src/tests/replacer.test.ts#L110