Navigation editor in the bluetronix CMS – customize menus individually
In this guide, you will learn how to customize the navigation of your website in the bluetronix CMS. From the navbar structure to the mobile menu – here you will learn step by step how to optimally configure your menu.
Navigation Editor: Website Menu Customizing
This documentation shows you how the navbar (website navigation) is structured in the bluetronix CMS and how to customize it. You will be guided through the structure, placeholders (text markers), mobile and sidebar, as well as the navigation editor.
Note: The file /bx_Header.html is only visible in developer mode (login as AAdmin).
Storage Location & Visibility
By default, the navbar is located in the main directory under Pages → /bx_Header.html. You make changes to the navigation in this file.
Code Example: /bx_Header.html
<div style="display:__DB_GB_DesktopHTML1_Display__" class="bx-DesktopHTML1"><!--bxEB_DSedit 00_Config DesktopHTML1 bxEB_DSedit-->
__DB_GB_DesktopHTML1__
</div>
<div class="bx-nav-outer">
<nav class="bx-nav">
<!-- left Icon logo -->
<div class="bx-navbar-left">
<div style="display:__DB_GB_DesktopNavIcon_Display__">
<button class="bx-nav-icon" id="BxMobileBarToggle">__DB_GB_DesktopNavIcon_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopLogo_Display__;">
<a href="/index.html"><img src="__DB_GB_DesktopLogo_Src__" class="bx-nav-brand"></a>
</div>
</div>
<!-- center buttons -->
<div class="bx-navbar-center" id="bxNavPoints">
<!-- zusatz icon Menue-Editor - display:none -->
<div style="position:relative;display:none;"><div style="position:absolute;left:15px;top:-21px;width:35px;height:35px;z-index:100000;"><!--bxEB_Navi 00_Menue bxEB_Navi--></div></div>
<ul style="display:__DB_GB_DesktopNav_Display__">
<!--bxNV_DB 00_Menue bxNV_DB-->
<!--bxNV_Navi-->
<li class="bx-nav-item __DB_Nav_CSSclass__"><a class="bx-nav-link" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
<li class="bx-nav-item has-submenu">
<a class="bx-nav-link __DB_Nav_CSSclass__" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a>
<button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span>__DB_GB_NavIconChevron_SVG__</span></button>
<ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
</ul>
</li>
<!--bxNV_Navi-->
<li class="bx-dropdown-item __DB_Nav_CSSclass__" role="none"><a class="bx-dropdown-link" role="menuitem" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
</ul>
</div>
<!-- icons right -->
<div class="bx-navbar-right">
<div style="display:__DB_GB_DesktopIconSearch_Display__ ">
<button class="bx-nav-icon" onclick="BlueSearchBar();">__DB_GB_DesktopIconSearch_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopIconLight_Display__">
<button class="bx-nav-icon" onclick="BlueLightDdark();">__DB_GB_DesktopIconLight_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopIconLogin_Display__">
<button class="bx-nav-icon" onclick="BlueLoginBar();">__DB_GB_DesktopIconLogin_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopIconLang_Display__">
<button class="bx-nav-icon" onclick="BlueLangBar();">__DB_GB_DesktopIconLang_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopIconBasket_Display__">
<button class="bx-nav-icon" onclick="BlueBasketBar();">__DB_GB_DesktopIconBasket_SVG__<div class="WKGBAnzDiv"><div class="WKGBAnzDivInner" id="WKGBAnz"></div></div></button>
</div>
<div style="display:__DB_GB_DesktopIconSide_Display__">
<button class="bx-nav-icon" id="BxSideBarToggle">__DB_GB_DesktopIconSide_SVG__</button>
</div>
</div>
</nav>
</div>
<!-- Mobile Menü -->
<div class="bx-mobile-bar" id="BxMobileBar">
<div style="display:__DB_GB_MobilHTML1_Display__" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit-->__DB_GB_MobilHTML1__</div>
<div id="bxNavPointsMobile" style="display:__DB_GB_MobilNav_Display__"></div>
<div style="display:__DB_GB_MobilHTML2_Display__" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit-->__DB_GB_MobilHTML2__</div>
</div>
<!-- Sidebar -->
<div class="bx-side-bar" id="BxSideBar">
<div style="display:__DB_GB_SideHTML1_Display__" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->__DB_GB_SideHTML1__</div>
<div id="bxNavPointsSide" style="display:__DB_GB_SideNav_Display__"></div>
<div style="display:__DB_GB_SideHTML2_Display__" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit-->__DB_GB_SideHTML2__</div>
</div>
<div style="display:__DB_GB_DesktopHTML2_Display__" class="bx-DesktopHTML2"><!--bxEB_DSedit 00_Config DesktopHTML2 bxEB_DSedit-->
__DB_GB_DesktopHTML2__
</div>
Navbar Structure
- Left Icon & Logo: Menü-Icon und Logo.
- Center Buttons: Menü-Buttons und Untermenüs.
- Icons Right: Funktions-Icons (z. B. Warenkorb, Suche, Sprache).
Understanding Placeholders (Text Markers)
The HTML placeholders are automatically replaced when saved in the CMS:
__DB_GB_DesktopHTMLxxx_Display__: Steuert die Sichtbarkeit (Aktiv/Inaktiv) über CMS → Webseite → Kopfzeile.__DB_GB_DesktopHTMLxxx__: Wird durch Inhalte (z. B. HTML, Bild-URL, SVG) ersetzt, die Du in Kopfzeile hinterlegst.__DB_Nav_xxx__: Werte aus der Navigationstabelle (z. B. Link, Name, Ziel, CSS-Klasse).__DB_GB_xxx_SVG__: SVG-Code des jeweiligen Icons.
If you do not want to use the options from the CMS header, you can remove the brands __DB_GB_xxx__ and __DB_GB_xxx_Display__ in the HTML. They are optional.
Section: Navbar Top
The additional bar above the menu scrolls (Phone & Desktop) out of view upwards. The actual navbar remains 'sticky' visible at the top. This way, important information (e.g. 'Download App ...') can appear at the top without permanently taking up space.
__DB_GB_DesktopHTML1_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.__DB_GB_DesktopHTML1__: HTML-Inhalt aus Kopfzeile.<!--bxEB_DSedit 00_Config DesktopHTML1 bxEB_DSedit-->: Editier-Button für den HTML-Eintrag.
Section: Navbar Bottom
The additional bar below the menu also scrolls (Phone & Desktop) upwards.
__DB_GB_DesktopHTML2_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.__DB_GB_DesktopHTML2__: HTML-Inhalt aus Kopfzeile.<!--bxEB_DSedit 00_Config DesktopHTML2 bxEB_DSedit-->: Editier-Button für den HTML-Eintrag.
Mobile Menu
The mobile bar slides in from the right side in phone mode. When the page loads, JavaScript (/bx_script/BxScript_own_min.js) takes the menu content from bxNavPoints into the mobile bar (BxMobileBar). Additionally, you can insert your own HTML blocks above and below the menu (e.g. large logos).
<div class="bx-mobile-bar" id="BxMobileBar">
<div style="display:__DB_GB_MobilHTML1_Display__" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit-->__DB_GB_MobilHTML1__</div>
<div id="bxNavPointsMobile" style="display:__DB_GB_MobilNav_Display__"></div>
<div style="display:__DB_GB_MobilHTML2_Display__" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit-->__DB_GB_MobilHTML2__</div>
</div>
Sidebar
The side bar slides in from the left side in phone mode. Here, too, you can place your own HTML blocks above/below the menu (e.g., for large logos). Optionally, the navigation menu can also be displayed in the sidebar.
<div class="bx-side-bar" id="BxSideBar">
<div style="display:__DB_GB_SideHTML1_Display__" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->__DB_GB_SideHTML1__</div>
<div id="bxNavPointsSide" style="display:__DB_GB_SideNav_Display__"></div>
<div style="display:__DB_GB_SideHTML2_Display__" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit-->__DB_GB_SideHTML2__</div>
</div>
Layout Note: You can optionally display the mobile menu or side bar on the right/left and swap the icons via CMS → Website → Header.
Menu Buttons & Submenu
<ul style="display:__DB_GB_DesktopNav_Display__">
<!--bxNV_DB 00_Menue bxNV_DB-->
<!--bxNV_Navi-->
<li class="bx-nav-item __DB_Nav_CSSclass__"><a class="bx-nav-link" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
<li class="bx-nav-item has-submenu">
<a class="bx-nav-link __DB_Nav_CSSclass__" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a>
<button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span>__DB_GB_NavIconChevron_SVG__</span></button>
<ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
</ul>
</li>
<!--bxNV_Navi-->
<li class="bx-dropdown-item __DB_Nav_CSSclass__" role="none"><a class="bx-dropdown-link" role="menuitem" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
</ul>
The menu structure is built with UL/LI and populated from the database table 00_Menu. You can specify another table using the tag <!--bxNV_DB 00_Menu bxNV_DB-->.
Between <!--bxNV_Navi--> are the HTML templates for main and sub-items. The tag <!--bxNV_Next_Sub_Button--> is automatically filled with the submenu entries.
Important: The connection to the CMS navigation function is established via the text tags. This also allows Custom Templates to be fully integrated. You can edit the navigation in the CMS submenu (under Edge). The system automatically creates pages and directories, so manual linking is not necessary.
Configure SVG Icons
You can manage the SVG code of the icons in the developer view of CMS → Website → Header in the lower section.
CSS Control & Order
You can change the order of the icons via CSS. The mobile bar can be displayed on the right or left depending on the layout.
Tips & Tricks
- In Kombination mit der Systemtabelle 00_Menue und CSS legst Du je Button fest, ob er in der Desktop-Navigation, der Mobile-Bar und/oder in der Side-Bar erscheint.
- In 00_Menue kann jedem Button eine CSS-Klasse in der Spalte CSSclass zugewiesen werden.
- Über CSS und die IDs
bxNavPoints,BxMobileBar,BxSideBarbestimmst Du, welche Buttons wo gerendert werden. So baust Du auch komplexe Navbar-Strukturen, die der Endkunde später selbst mit der CMS-Navigation verändern kann.
Additional Button for the Navigation Editor
<!-- zusatz icon Menue-Editor - display:none -->
<div style="position:relative;display:none;"><div style="position:absolute;left:15px;top:-21px;width:35px;height:35px;z-index:100000;"><!--bxEB_Navi 00_Menue bxEB_Navi--></div></div>
This will display an additional edit button in edit mode. By replacing 00_Menu, you can specify another navigation table. The standard navigation editor always uses 00_Menu.
Best Practice: Keep all navigation elements consolidated in /bx_Header.html. This way, the mobile bar, side bar, and desktop navbar remain consistent, and switching the data source (e.g., a different table than 00_Menu) can be done quickly.
FAQ
what customers often ask us
The navbar is located in the main directory under Pages ⯈ /bx_Header.html. There you can make all changes to the website navigation.
Why can't I see the file /bx_Header.html?
The file is only visible in Developer Mode. Log in as AAdmin to gain access.
How is the navbar structured?
The navbar consists of three main areas: – Left Icon & Logo: Menu icon and logo – Center Buttons: Main navigation and submenus – Icons Right: Function icons like search, login, or cart.
What do the placeholders (text tags) in the HTML code mean?
The placeholders are automatically replaced when saved in the CMS. For example, none controls the visibility of an element, while inserts the actual content. You can configure these tags under CMS ⯈ Website ⯈ Header.
Can I remove the text tags?
Yes, if you do not want to use the CMS header options, you can simply delete tags like or . They are optional.
How can I add content above and below the navbar?
You can activate additional bars through the Navbar-Top and Navbar-Bottom areas. These are controlled via CMS ⯈ Website ⯈ Header and filled with HTML content.
How does the mobile menu work?
In phone mode, the mobile bar slides in from the right side. The menu content is automatically taken from the desktop menu. You can insert additional HTML blocks like logos above and below.
How do I activate the sidebar?
The sidebar opens from the left side in phone mode. Here, you can also add your own HTML blocks. You control the display via CMS ⯈ Website ⯈ Header.
Can I decide whether the navigation appears in the sidebar or mobile bar?
Yes, through the layout options you can choose whether your navigation is displayed in the sidebar or mobile bar. You can also specify which side (left/right) it appears on using the icons.
How is the menu managed in the CMS?
The menu structure is generated from the system table 00_Menu. You edit this in the CMS under Edge ⯈ Navigation. Pages and subpages are created automatically.
How can I create custom menu templates?
Using the tag <!--bxNV_DB 00_Menu bxNV_DB-->, you can specify a different table as a data source. This allows you to create custom navigations or templates that are linked to the CMS navigation.
How do I change the SVG icons?
You can edit the SVG codes of the icons in the lower area of the developer view under CMS ⯈ Website ⯈ Header.
How do I change the order of the icons in the navbar?
You can adjust the order of the icons using CSS. The position of the mobile bar (right or left) can also be controlled via CSS.
How can I determine which buttons appear in the desktop, mobile, or sidebar?
Through the table 00_Menu, you can assign a CSS class name to each navigation. With these classes, you control via CSS where the button is displayed – for example, in #bxNavPoints (Desktop), #BxMobileBar (Mobile), or #BxSideBar (Sidebar).
What does the additional button for the navigation editor do?
This button displays an additional editor for navigation elements in editing mode. By default, it uses the table 00_Menu, but you can also define another table.
What is the recommended best practice for navigation?
Keep all navigation elements bundled in the file /bx_Header.html. This way, the desktop, mobile, and sidebar menus remain synchronized and can be quickly adjusted or replaced if needed.