Navigation-Editor im bluetronix CMS – Menü individuell anpassen

Name: Website builder App
Brand: bluetronix
Rating: 5 (830 reviews)

In dieser Anleitung erfährst Du, wie Du die Navigation Deiner Website im bluetronix CMS individuell anpasst. Von der Navbar-Struktur bis zum Mobile-Menü – hier lernst Du Schritt für Schritt, wie Du Dein Menü optimal konfigurierst.

Speicherort & Sichtbarkeit Code-Beispiel: <i>/bx_Header.html</i> Navbar-Aufbau Abschnitt: Navbar-Top Abschnitt: Navbar-Bottom Mobile Menü Sidebar Menü-Buttons & Submenü SVG-Icons konfigurieren CSS-Steuerung & Reihenfolge Tipps & Tricks Zusatz-Button für den Navigations-Editor FAQ

Starte CMS-video Starte app-video

Navigation-Editor: Webseiten-Menü Customizing

Diese Dokumentation zeigt Dir, wie die Navbar (Website-Navigation) im bluetronix CMS aufgebaut ist und wie Du sie anpasst. Du wirst durch Struktur, Platzhalter (Text-Marken), Mobile- und Side-Bar sowie den Navigations-Editor geführt.

Hinweis: Die Datei /bx_Header.html ist nur im Entwickler-Modus sichtbar (Anmeldung als AAdmin).

Speicherort & Sichtbarkeit

Standardmäßig liegt die Navbar im Hauptverzeichnis unter Seiten → /bx_Header.html. Änderungen an der Navigation nimmst Du in dieser Datei vor.

Code-Beispiel: /bx_Header.html



<div style="display:none" class="bx-DesktopHTML1"><!--bxEB_DSedit 00_Config DesktopHTML1 bxEB_DSedit-->
        
</div>   


<div class="bx-nav-outer">
   <nav class="bx-nav">

      <!-- left Icon logo -->
      <div class="bx-navbar-left">
         <div style="display:block">
			   <button class="bx-nav-icon" id="BxMobileBarToggle"></button>    
         </div>

         <div style="display:block;">
            <a href="/index.html"><img src="/img/bluetronix_Logo_white.svg" 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:">
<!--bxNV_DB 00_Menue bxNV_DB-->

<!--bxNV_Navi-->
            <li class="bx-nav-item "><a class="bx-nav-link" href="" ></a></li>
<!--bxNV_Navi-->

               <li class="bx-nav-item has-submenu">
                  <a class="bx-nav-link " href="" ></a>
                  <button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span></span></button>

                  <ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
                  </ul>
               </li>

<!--bxNV_Navi-->
                     <li class="bx-dropdown-item " role="none"><a class="bx-dropdown-link" role="menuitem" href="" ></a></li>
<!--bxNV_Navi-->
         </ul>
      </div>

      <!-- icons right -->
      <div class="bx-navbar-right">
         <div style="display:none ">    
         	<button class="bx-nav-icon" onclick="BlueSearchBar();"></button>
         </div>         

         <div style="display:block">      
         	<button class="bx-nav-icon" onclick="BlueLightDdark();"></button>            
         </div>  

         <div style="display:none">          
         	<button class="bx-nav-icon" onclick="BlueLoginBar();"></button>                   
         </div>   

         <div style="display:block">                  
         	<button class="bx-nav-icon" onclick="BlueLangBar();"></button>                   
         </div>   

         <div style="display:none">      
         	<button class="bx-nav-icon" onclick="BlueBasketBar();"><div class="WKGBAnzDiv"><div class="WKGBAnzDivInner" id="WKGBAnz"></div></div></button>  
         </div>
                         
         <div style="display:none"> 
            <button class="bx-nav-icon" id="BxSideBarToggle"></button>               
         </div> 
      </div>

   </nav>
</div>

<!-- Mobile Menü -->
<div class="bx-mobile-bar" id="BxMobileBar">
   <div style="display:none" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit--></div>  
   <div id="bxNavPointsMobile" style="display:"></div>
   <div style="display:block" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit--></div>  
</div>

<!-- Sidebar -->
<div class="bx-side-bar" id="BxSideBar">
   <div style="display:block" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->Valuta










Velg språk













Region - språk




Australia - English



Canada - English



Česko - Čeština



中国 - 中文



Danmark - Dansk



Deutschland - Deutsch




España - Español



Suomi - Suomi



France - Français



Ελλάδα - Ελληνικά



भारत - हिंदी



Ireland - English



ایران - فارسی



ישראל - עברית



Italia - Italiano



日本 - 日本語



대한민국 - 한국어



Magyarország - Magyar



Nederland - Nederlands



Norge - Norsk



Österreich - Deutsch




Polska - Polski



Portugal - Português



Россия - Русский



المملكة العربية السعودية - العربية



Schweiz - Deutsch



Slovensko - Slovenčina



Sverige - Svenska



United Arab Emirates - English



الإمارات العربية المتحدة – العربية



United Kingdom - English



United States - English





</div>  
   <div id="bxNavPointsSide" style="display:none"></div>
   <div style="display:none" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit--></div>  
</div>


<div style="display:none" class="bx-DesktopHTML2"><!--bxEB_DSedit 00_Config DesktopHTML2 bxEB_DSedit-->
          
</div>

Left Icon & Logo: Menü-Icon und Logo.
Center Buttons: Menü-Buttons und Untermenüs.
Icons Right: Funktions-Icons (z. B. Warenkorb, Suche, Sprache).

Platzhalter (Text-Marken) verstehen

Die HTML-Platzhalter werden beim Speichern im CMS automatisch ersetzt:

: Steuert die Sichtbarkeit (Aktiv/Inaktiv) über CMS → Webseite → Kopfzeile.
: Wird durch Inhalte (z. B. HTML, Bild-URL, SVG) ersetzt, die Du in Kopfzeile hinterlegst.
: Werte aus der Navigationstabelle (z. B. Link, Name, Ziel, CSS-Klasse).
: SVG-Code des jeweiligen Icons.

Wenn Du die Optionen aus dem CMS - Kopfzeile nicht nutzen möchtest, kannst Du die Marken und im HTML entfernen. Sie sind optional.

Die Zusatzleiste über dem Menü scrollt (Phone & Desktop) nach oben aus dem Sichtbereich. Die eigentliche Navbar bleibt am oberen Rand „sticky“ sichtbar. So können wichtige Infos (z. B. „Download App …“) oben erscheinen, ohne dauerhaft Platz zu blockieren.

none: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.
: HTML-Inhalt aus Kopfzeile.
: Editier-Button für den HTML-Eintrag.

Die Zusatzleiste unter dem Menü scrollt (Phone & Desktop) ebenfalls nach oben weg.

none: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.
: HTML-Inhalt aus Kopfzeile.
: Editier-Button für den HTML-Eintrag.

Mobile Menü

Die Mobile-Bar fährt im Phone-Modus von der rechten Seite ein. Beim Laden der Seite übernimmt JavaScript (/bx_script/BxScript.js) den Menüinhalt von bxNavPoints in die Mobile-Bar (BxMobileBar). Zusätzlich kannst Du über und unter dem Menü eigene HTML-Blöcke einfügen (z. B. große Logos).


<div class="bx-mobile-bar" id="BxMobileBar">
   <div style="display:none" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit--></div>  
   <div id="bxNavPointsMobile" style="display:"></div>
   <div style="display:block" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit--></div>  
</div>

Die Side-Bar fährt im Phone-Modus von der linken Seite ein. Auch hier kannst Du oberhalb/unterhalb des Menüs eigene HTML-Blöcke setzen (z. B. für große Logos). Optional lässt sich das Navigations-Menü auch in der Sidebar darstellen.


<div class="bx-side-bar" id="BxSideBar">
   <div style="display:block" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->Valuta










Velg språk













Region - språk




Australia - English



Canada - English



Česko - Čeština



中国 - 中文



Danmark - Dansk



Deutschland - Deutsch




España - Español



Suomi - Suomi



France - Français



Ελλάδα - Ελληνικά



भारत - हिंदी



Ireland - English



ایران - فارسی



ישראל - עברית



Italia - Italiano



日本 - 日本語



대한민국 - 한국어



Magyarország - Magyar



Nederland - Nederlands



Norge - Norsk



Österreich - Deutsch




Polska - Polski



Portugal - Português



Россия - Русский



المملكة العربية السعودية - العربية



Schweiz - Deutsch



Slovensko - Slovenčina



Sverige - Svenska



United Arab Emirates - English



الإمارات العربية المتحدة – العربية



United Kingdom - English



United States - English





</div>  
   <div id="bxNavPointsSide" style="display:none"></div>
   <div style="display:none" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit--></div>  
</div>

Layout-Hinweis: Du kannst wahlweise Mobile-Menü oder Side-Bar rechts/links anzeigen und die Icons über CMS → Webseite → Kopfzeile tauschen.

Menü-Buttons & Submenü



         <ul style="display:">
<!--bxNV_DB 00_Menue bxNV_DB-->

<!--bxNV_Navi-->
            <li class="bx-nav-item "><a class="bx-nav-link" href="" ></a></li>
<!--bxNV_Navi-->

               <li class="bx-nav-item has-submenu">
                  <a class="bx-nav-link " href="" ></a>
                  <button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span></span></button>

                  <ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
                  </ul>
               </li>

<!--bxNV_Navi-->
                     <li class="bx-dropdown-item " role="none"><a class="bx-dropdown-link" role="menuitem" href="" ></a></li>
<!--bxNV_Navi-->
         </ul>

Die Menüstruktur wird mit UL/LI aufgebaut und aus der Datenbanktabelle 00_Menue befüllt. Über die Marke  kannst Du auch eine andere Tabelle angeben.

Zwischen  stehen die HTML-Vorlagen für Haupt- und Unterpunkte. Die Marke  wird automatisch mit den Submenü-Einträgen gefüllt.

Wichtig: Die Verbindung zur CMS-Navigations-Funktion entsteht über die Text-Marken. So lassen sich auch Custom Templates vollständig anbinden. Die Navigation bearbeitest Du im CMS-Submenü (unter Rand). Seiten und Verzeichnisse legt das System automatisch an – manuelles Verlinken entfällt.

SVG-Icons konfigurieren

Den SVG-Code der Icons pflegst Du in der Entwickleransicht von CMS → Webseite → Kopfzeile im unteren Bereich.

CSS-Steuerung & Reihenfolge

Die Reihenfolge der Icons kannst Du per CSS ändern. Die Mobile-Bar lässt sich je nach Layout rechts oder links einblenden.

Tipps & 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, BxSideBar bestimmst 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.

Zusatz-Button für den Navigations-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>

Damit blendest Du im Bearbeitungsmodus einen zusätzlichen Edit-Button ein. Durch Ersetzen von 00_Menue kannst Du eine andere Navigationstabelle angeben. Der Standard-Navigations-Editor nutzt immer 00_Menue.

Best Practice: Halte alle Navigationselemente in /bx_Header.html gebündelt. So bleiben Mobile-Bar, Side-Bar und Desktop-Navbar konsistent, und der Austausch der Datenquelle (z. B. andere Tabelle als 00_Menue) ist schnell erledigt.

FAQ

hva kunder ofte spør oss om

Wo finde ich die Navbar-Datei im bluetronix CMS?

Die Navbar befindet sich im Hauptverzeichnis unter Seiten ⯈ /bx_Header.html. Dort kannst Du alle Änderungen an der Website-Navigation vornehmen.

Warum sehe ich die Datei /bx_Header.html nicht?

Die Datei ist nur im Entwickler-Modus sichtbar. Melde Dich dazu als AAdmin an, um Zugriff zu erhalten.

Wie ist die Navbar aufgebaut?

Die Navbar besteht aus drei Hauptbereichen: – Left Icon & Logo: Menü-Icon und Logo – Center Buttons: Hauptnavigation und Untermenüs – Icons Right: Funktionsicons wie Suche, Login oder Warenkorb

Was bedeuten die Platzhalter (Text-Marken) im HTML-Code?

Die Platzhalter werden beim Speichern im CMS automatisch ersetzt. Zum Beispiel steuert none die Sichtbarkeit eines Elements, während den eigentlichen Inhalt einfügt. Diese Marken kannst Du unter CMS ⯈ Webseite ⯈ Kopfzeile konfigurieren.

Kann ich die Text-Marken entfernen?

Ja, wenn Du die CMS-Kopfzeilen-Optionen nicht verwenden möchtest, kannst Du die Marken wie oder einfach löschen. Sie sind optional.

Wie kann ich Inhalte oberhalb und unterhalb der Navbar hinzufügen?

Über die Bereiche Navbar-Top und Navbar-Bottom kannst Du zusätzliche Leisten aktivieren. Diese werden über CMS ⯈ Webseite ⯈ Kopfzeile gesteuert und mit HTML-Inhalten gefüllt.

Wie funktioniert das Mobile Menü?

Im Phone-Modus fährt die Mobile-Bar von der rechten Seite ein. Der Menüinhalt wird automatisch aus dem Desktop-Menü übernommen. Du kannst oberhalb und unterhalb zusätzliche HTML-Blöcke wie Logos einfügen.

Wie aktiviere ich die Sidebar?

Die Sidebar öffnet sich im Phone-Modus von der linken Seite. Auch hier kannst Du eigene HTML-Blöcke hinzufügen. Die Darstellung steuerst Du über CMS ⯈ Webseite ⯈ Kopfzeile.

Kann ich entscheiden, ob die Navigation in der Sidebar oder Mobile-Bar erscheint?

Ja, über die Layout-Optionen kannst Du auswählen, ob Deine Navigation in der Sidebar oder Mobile-Bar angezeigt wird. Außerdem kannst Du über die Icons festlegen, auf welcher Seite (links/rechts) sie erscheint.

Wie wird das Menü im CMS verwaltet?

Die Menüstruktur wird aus der Systemtabelle 00_Menue generiert. Diese bearbeitest Du im CMS unter Rand ⯈ Navigation. Seiten und Unterseiten werden automatisch angelegt.

Wie kann ich eigene Menü-Templates erstellen?

Über die Marke  kannst Du eine andere Tabelle als Datenquelle angeben. So kannst Du eigene Navigationen oder Templates erstellen, die mit der CMS-Navigation verbunden sind.

Wie ändere ich die SVG-Icons?

Die SVG-Codes der Icons kannst Du unter CMS ⯈ Webseite ⯈ Kopfzeile im unteren Bereich der Entwickleransicht bearbeiten.

Wie ändere ich die Reihenfolge der Icons in der Navbar?

Die Reihenfolge der Icons kannst Du über CSS anpassen. Auch die Position der Mobile-Bar (rechts oder links) lässt sich über CSS steuern.

Wie kann ich festlegen, welche Buttons in Desktop-, Mobile- oder Side-Bar erscheinen?

Über die Tabelle 00_Menue kannst Du jeder Navigation einen CSS-Klassennamen geben. Mit diesen Klassen steuerst Du per CSS, wo der Button angezeigt wird – z. B. in #bxNavPoints (Desktop), #BxMobileBar (Mobile) oder #BxSideBar (Sidebar).

Was macht der Zusatz-Button für den Navigations-Editor?

Dieser Button blendet im Bearbeitungsmodus einen zusätzlichen Editor für Navigationselemente ein. Standardmäßig nutzt er die Tabelle 00_Menue, Du kannst aber auch eine andere Tabelle definieren.

Was ist die empfohlene Best Practice für die Navigation?

Halte alle Navigationselemente in der Datei /bx_Header.html gebündelt. So bleiben Desktop-, Mobile- und Sidebar-Menü synchron und lassen sich bei Bedarf schnell anpassen oder austauschen.