Letzte Änderung: 28. August 2025
Fügen Sie Navigationsmenüs auf Ihrer Website ein, um Benutzern zu helfen, die benötigten Informationen zu finden. Navigationsmenüs befinden sich häufig in den Headern, Seitenleisten und Footern einer Website. HubSpot bietet einige integrierte Lösungen zum Hinzufügen von Menüs zu Ihren Seiten, abhängig von Ihrem Anwendungsfall, aber Sie können bei Bedarf auch Ihre eigenen Menüs erstellen. Ihr Account enthält auch eine Einstellungsseite zum Erstellen und Verwalten von Menüs, die die verschiedenen Menümethoden referenzieren können.
  • Standardmenüs: HubSpot bietet zwei Standardmenütypen, die nach Bedarf sofort verwendet werden können. Diese Menüs können als Module im Seiten-Editor in Drag-&-Drop-Bereichen oder in Vorlagen hinzugefügt werden, oder Sie können sie mithilfe von HubL-Tags zu benutzerdefinierten Modulen hinzufügen.
    • Menü: Über das Standardmenü, das häufig für die globale Navigation verwendet wird, z. B. im Header oder Footer der Website, können Sie ein Menü auswählen, das Sie in Ihren Navigationseinstellungen konfiguriert haben, und es dann mit Optionen wie maximale Ebenen, Anzeigeeinstellungen und Ausrichtung weiter konfigurieren.
    • Einfaches Menü: Das Modul „Einfaches Menü“ wird häufig für die seitenbezogene Navigation verwendet, z. B. für Pillar-Seiten, und ermöglicht es Ihnen, Menüs auf Seitenebene zu erstellen. Anstatt auf ein Menü zu verweisen, das Sie in Ihren Navigationseinstellungen erstellt haben, werden einfache Menüelemente im Content-Editor verwaltet und verfügen über weniger Konfigurationsoptionen als das Standardmenü. Dies ermöglicht es Content-Autoren, Menüs auf bestimmten Seiten nach Bedarf zu aktualisieren, ohne die globale Navigation zu beeinträchtigen.
  • Benutzerdefinierte Menüs: Wenn die Standardmenüoptionen nicht Ihren Anforderungen entsprechen, können Sie Ihre eigenen benutzerdefinierten Lösungen erstellen. Dies kann vom Erstellen benutzerdefinierter Module mit Standardmenüs über die Standard-HubL-Tags mennu und simple_menu bis hin zur Verwendung der HubL-Funktion menu() reichen, um eine vollständig benutzerdefinierte Lösung mit Repeater-Gruppen oder HubDB zu erstellen. Allerdings sollten Sie beim Erstellen eines komplizierten benutzerdefinierten Menüs die Funktionen und Möglichkeiten des Editors berücksichtigen. In vielen Fällen kann es sinnvoller sein, die menu- und simple_menu-Felder mit der menu()-Funktion zu verwenden, damit ein ausgewogenes Verhältnis zwischen benutzerdefinierter Lösung und intuitiver Bearbeitungsumgebung besteht.
Im Folgenden erfahren Sie mehr über die verschiedenen Möglichkeiten, Menüs auf Seiten einzubinden und die Navigationseinstellungen in HubSpot zu verwalten. In jedem Account berücksichtigt HubSpot Navigationseinstellungen, sodass Sie Menüs mit mehreren Ebenen erstellen können, die in Menümodulen und menu-Tags referenziert werden. Dadurch wird eine einzige Informationsquelle für eine Reihe von Menüelementen erstellt, sodass Sie ein Menü nur einmal aktualisieren müssen, um alle Seiten zu aktualisieren, die dieses Menü referenzieren. Sie können so viele Menüs wie nötig erstellen, und jedes Menü enthält Optionen zum Klonen, Löschen, Umbenennen und Anzeigen des Änderungsverlaufs. Um Menüs in HubSpot zu erstellen und zu verwalten, gehen Sie zu Einstellungen > Website > Navigationsmenüs. Weitere Informationen zu den Navigationseinstellungen finden Sie in der Wissensdatenbank von HubSpot.
Bereich mit Navigationseinstellungen
Wenn Sie mit Menüs in HubL arbeiten, müssen Sie möglicherweise die ID des Menüs referenzieren. Dies gilt nicht für einfache Menüs, da deren Menüelemente im Editor festgelegt sind. Wenn Sie ein benutzerdefiniertes Modul erstellen, können Sie die Menü-ID am einfachsten erhalten, indem Sie ein Menüfeld erstellen. Dieses Feld ermöglicht es dem Content-Autor, ein Menü aus einem Dropdown-Menü auszuwählen, und gibt die Menü-ID zurück. Wenn Sie die Menü-ID hardcodieren müssen, können Sie sie von der URL abrufen, wenn Sie das Menü auf der Seite mit den Navigationseinstellungen anzeigen.
menu-id-in-url
Beachten Sie, dass beim ersten Aufruf der Seite die Standardmenü-ID nicht in der URL angezeigt wird. Um die ID für dieses Standardmenü zu erhalten, müssen Sie ein anderes Menü auswählen und dann das Standardmenü erneut auswählen.
Eine bewährte Methode für Header von Websites, die oft die umfangreiche Hauptnavigation enthalten, ist die Bereitstellung eines „Zum Inhalt springen“-Links. Dies hilft Benutzern, die mit der Tastatur navigieren, langwierige Menüs zu überspringen.

​
HubL-menu-Tags

Verwenden Sie die HubL-Tags menu und simple_menu, um Menüfunktionen zu benutzerdefinierten Modulen hinzuzufügen. Wenn Sie das Tag zu einem Modul hinzufügen, wird das Menü auf der Seite gerendert. Damit Content-Autoren die Optionen des Menüs im Seiten-Editor konfigurieren können, müssen Sie auch das Menü oder das einfache Menüfeld in das Modul aufnehmen. Im Folgenden erfahren Sie mehr über die einzelnen Typen von Menü-Tags.

​
Standardmenü

Das HubL-menu-Tag generiert Standard-HTML für Menüs mit Klassennamen, die bereits für die tiefen Ebenen, den aktiven Status und für das Vorhandensein von untergeordneten Elementen vorgesehen sind. Das Menü-Tag kann innerhalb von benutzerdefinierten Modulen verwendet werden, sodass es eine einfache Möglichkeit zur Erstellung von Navigationsmenüs für die Hauptnavigation und die Seitenleistennavigation darstellt. Für dieses Tag müssen Sie die Menü-ID angeben. 
{% menu "menu" %}
{% menu "my_menu" id=456, site_map_name='Default', overrideable=False, root_type='site_root', flyouts='true', max_levels='2', flow='horizontal', label='Advanced Menu' %}

​
Einfaches Menü

Das simple_menu-Tag funktioniert ähnlich wie das menu-Tag, indem Standardmenü-HTML generiert wird mit Klassennamen für tiefe Ebenen, aktive Zustände und ob das Element Unterelemente hat. Der Unterschied besteht darin, dass dieses Tag ein Dict der Menüstruktur anstelle einer Menü-ID erwartet. Dies ist hilfreich, wenn die Felder eines Moduls die Struktur eines Menüs bestimmen sollen, anstatt die Navigationseinstellungen zu verwenden. Sie können diesen Typ von Modul beispielsweise für das Inhaltsverzeichnis einer Pillar-Seite verwenden. 
{% simple_menu menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}

​
Standardmenümodule

HubSpot bietet Standardmodule, die Sie Code-Vorlagen hinzufügen können, sowie Seiten über den Seiten-Editor, wenn eine Vorlage Drag-&-Drop-Bereiche enthält. Jedes Modul hat ein anderes Bearbeitungserlebnis, wobei das Standardmenü mehr Konfigurationsoptionen bietet als das einfache Menü. Da Module nicht verschachtelt werden können, können Sie diese Module nicht innerhalb anderer Module platzieren. Stattdessen sollten Sie das menu- oder simple-menu-Tag verwenden. 
{% module "main_nav" path="@hubspot/menu", label="Menu" id="123456" %}

{% module "menu" path="@hubspot/simple_menu", label="Simple Menu" menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}

​
Standardmenü-Markup

Standardmenümodule werden von ihren jeweiligen HubL-Menü-Tags (menu und simple_menu) angetrieben, um Standard-Menü-HTML zu generieren. Wie andere HubSpot-Module werden auch die Menümodule in Modul-Wrapper-Markup eingeschlossen. Diese div- und span-Tags machen das Modul mit dem Content-Editor bearbeitbar. Das Menü-Markup sowohl der Menü- als auch der einfachen Menümodule ist das gleiche, mit Ausnahme einiger Klassen, die auf den Wrapper und die Menü-Container angewendet werden. 
<div
  id="hs_cos_wrapper_widget_1711642118872"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-menu"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="module"
>
  <span
    id="hs_cos_wrapper_widget_1711642118872_"
    class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_menu"
    style=""
    data-hs-cos-general-type="widget"
    data-hs-cos-type="menu"
  >
    <div
      id="hs_menu_wrapper_widget_1711642118872_"
      class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal"
      role="navigation"
      data-sitemap-name="default"
      data-menu-id="162449947934"
      aria-label="Navigation Menu"
    >
      <ul role="menu">
        <li
          class="hs-menu-item hs-menu-depth-1 hs-item-has-children"
          role="none"
        >
          <a
            href="https://developers.hubspot.de/docsjavascript:;"
            aria-haspopup="true"
            aria-expanded="false"
            role="menuitem"
            >Menu item 1</a
          >
          <ul role="menu" class="hs-menu-children-wrapper">
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a
                href="https://developers.hubspot.de/docs//freecrmtest.hubspotpagebuilder.com/test"
                role="menuitem"
                >A</a
              >
            </li>
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a href="https://www.wikipedia.org/" role="menuitem">B</a>
            </li>
          </ul>
        </li>
        <li
          class="hs-menu-item hs-menu-depth-1 hs-item-has-children"
          role="none"
        >
          <a
            href="https://developers.hubspot.de/docsjavascript:;"
            aria-haspopup="true"
            aria-expanded="false"
            role="menuitem"
            >Menu item 2</a
          >
          <ul role="menu" class="hs-menu-children-wrapper">
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a
                href="https://developers.hubspot.de/docs//freecrmtest.hubspotpagebuilder.com/test"
                role="menuitem"
                >A</a
              >
            </li>
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a href="https://www.hubspot.com/new-page" role="menuitem">B</a>
            </li>
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a href="https://www.hubspot.com/blah" role="menuitem">C</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </span>
</div>
Wie oben gezeigt, wird das eigentliche Menü als ul gerendert, das in ein div mit der hs-menu-wrapper-Klasse eingeschlossen ist.  Dieser Wrapper verfügt über zusätzliche Klassen, je nachdem, wie das Modul im Seiten-Editor konfiguriert ist, z. B. das Aktivieren von Ausklappmenüs. Erfahren Sie unten mehr über Klassen, die durch diese Einstellungen hinzugefügt wurden. Innerhalb des ul ist jedes Menüelement ein in ein li eingeschlossenes a-Tag. Das li-Tag hat eine Klasse, die die Tiefe des Elements in der Menüstruktur angibt (z. B. hs-menu-depth-1). Wenn ein Menüelement ein verschachteltes untergeordnetes Element enthält, hat das entsprechende li die zusätzliche Klasse hs-item-has-children. Das untergeordnete Menü wird als verschachteltes ul mit der Klasse hs-menu-children-wrapper gerendert. Wenn Sie eine Seite besuchen, die in Ihrer Menüstruktur enthalten ist, wird die active-branch-Klasse zu den übergeordneten li-Elementen hinzugefügt und eine Klasse vom Typ active wird zum jeweiligen li-Element dieser Seite hinzugefügt.

​
Standardmenüformatierung

Auf Modulebene haben Sie, unabhängig davon, ob Sie ein Menümodul im Seiten-Editor bearbeiten oder ein Menüfeld in einem benutzerdefinierten Modul bearbeiten, einige Konfigurationsoptionen. Mit den Feldern Menü, Menütyp „Erweitert“ und Max Ebenen können Sie steuern, dass die Menüelemente im Seiten-Markup als li gerendert werden. Die Ausrichtungs- und Ausklappmenüoptionen wirken sich jedoch auf die CSS-Selektoren aus, die dem div-Menü-Wrapper hinzugefügt wurden. Sie können diese Selektoren dann in Ihrem CSS anvisieren.
menu-options-in-editor
Im Folgenden erfahren Sie mehr über die Klassen, die dem div-Menü-Wrapper in Abhängigkeit von diesen Feldeinstellungen hinzugefügt werden.
KlasseBeschreibung
hs-menu-flow-horizontalWird dem div-Wrapper hinzugefügt, wenn das Menü auf horizontale Ausrichtung festgelegt ist.
hs-menu-flow-verticalWird demdiv-Wrapper hinzugefügt, wenn das Menü auf vertikale Ausrichtung festgelegt ist.
flyoutsWird dem div-Wrapper hinzugefügt, wenn Ausklappmenüs aktivieren ausgewählt ist.
no-flyoutsWird dem div-Wrapper hinzugefügt, wenn Ausklappmenüs aktivieren nicht ausgewählt ist.
Um Ihnen den Einstieg in das Formatieren von Menüs mit Stilen zu erleichtern, finden Sie unten einige Beispiel-CSS-Selektoren, mit denen Sie das menu-Tag und das Standardmenümodul formatieren können. 
/* Menus */
.hs-menu-wrapper ul {
  /* Targets all unordered lists within HubSpot menus */
}

/* Horizontal Menu
   ========================================================================== */

.hs-menu-wrapper.hs-menu-flow-horizontal ul {
  /* Targets all unordered lists within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li {
  /* Targets all list items within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li a {
  /* Targets all links within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul {
  /* Targets the top-level unordered list within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
  /* Targets top-level list items within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
  /* Targets top-level list links within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children {
  /* Targets list items with children with the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts
  > ul
  li.hs-item-has-children
  ul.hs-menu-children-wrapper {
  /* Targets second-level unordered lists when flyouts are enabled (for styling dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal
  > ul
  li.hs-item-has-children
  ul.hs-menu-children-wrapper
  li
  a {
  /* Targets links within second-level unordered lists  */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts
  > ul
  li.hs-item-has-children
  ul.hs-menu-children-wrapper
  li.hs-item-has-children
  ul.hs-menu-children-wrapper {
  /* Targets third-level unordered lists (for styling dropdowns)*/
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts
  > ul
  li.hs-item-has-children:hover
  > ul.hs-menu-children-wrapper {
  /* Targets second-level unordered list when top-level menu item is hovered (use to reveal dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal
  > ul
  li.hs-item-has-children.active-branch {
  /* Targets top-level active branch unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal
  > ul
  li.hs-item-has-children.active-branch
  > ul.hs-menu-children-wrapper {
  /* Targets second-level unordered list within active branch */
}
.hs-menu-wrapper.hs-menu-flow-horizontal li.active a {
  /* Targets the link within the active list item */
}

/* Vertical Menu
   ========================================================================== */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  /* Targets all unordered lists within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
  /* Targets all list items within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
  /* Targets all links within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul {
  /* Targets the top-level unordered list within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a {
  /* Targets top-level links in vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children {
  /* Targets top-level list items with children */
}

/* No flyouts
   ========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper {
  /* Targets child menus when flyouts are disabled */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts
  > ul
  li.hs-item-has-children
  ul.hs-menu-children-wrapper {
  /* Targets second-level child menus when flyouts are disabled */
}

​
HubL-menu()-Funktion

Die menu()-Funktion ermöglicht es Ihnen, vollständig angepasste Menüstrukturen zu erstellen. Sie gibt ein Objekt zurück, das Sie durchlaufen können, um ein Menü zu erstellen. Es gibt viele bereitgestellte Eigenschaften für die Menüpunkte. Beachten Sie, dass Sie bei der Verwendung der Menüfunktion die volle Verantwortung für die Barrierefreiheit Ihres Menüs, die Struktur und die Formatierung tragen. 
{% set node = menu(987) %}
{% for child in node.children %}
	{{ child.label }}<br>
{% endfor %}

{% set default_node = menu("default") %}
{% for child in default_node.children %}
	{{ child.label }}<br>
{% endfor %}
Die HubSpot CMS Theme Boilerplate enthält ein Beispiel für ein Menümodul, das mit der menu()-Funktion erstellt wurde. Sie können dies Ihren Bedürfnissen entsprechend ändern, um komplizierte Menüs zu erstellen.