Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man ein Dropdown-Menü in WordPress erstellt (Anleitung für Anfänger)

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

Möchten Sie ein Dropdown-Menü in WordPress erstellen?

Ein Dropdown-Menü zeigt eine Liste von Links an, wenn Sie mit der Maus über einen Menüpunkt fahren. Sie können diese Menüs verwenden, um viele Optionen auf kleinem Raum zu zeigen und Besuchern zu helfen, das zu finden, wonach sie suchen, indem Sie Links in Kategorien organisieren.

In dieser Anleitung für Einsteiger zeigen wir Ihnen, wie Sie ein Dropdown-Menü in WordPress erstellen können.

Creating a dropdown menu in WordPress

Warum Dropdown-Menüs in WordPress verwenden?

WordPress verfügt über ein integriertes Menüverwaltungssystem, mit dem Sie auf einfache Weise Navigationsmenüs zu Ihrer Website hinzufügen können.

Navigationsmenüs sind Links zu den wichtigsten Seiten Ihrer Website und erscheinen normalerweise in einer Reihe neben dem Logo Ihrer Website.

Typical navigation menu with a horizontal row of links

Wenn Sie mit einem WordPress-Blog beginnen oder eine Website mit nur wenigen Seiten erstellen, kann es sinnvoll sein, Ihr Menü in einer einzigen Zeile anzulegen. Besucher können dann alle wichtigen Seiten auf einen Blick sehen.

Wenn Sie jedoch ein Online-Geschäft oder eine große Website betreiben, haben Sie möglicherweise viele Inhalte. Das Hinzufügen all dieser Links zum Menü kann überwältigend sein und Ihre Website unübersichtlich aussehen lassen.

Dropdown-Menüs lösen dieses Problem, indem sie Menü-Links nur dann anzeigen, wenn ein Besucher mit der Mauszeigerkontakt über das übergeordnete Element fährt. Sie ermöglichen es Ihnen auch, Ihre Inhalte in Themen, Kategorien oder Gruppen zu organisieren. Sie können sogar Titel zu Ihren Menüs hinzufügen.

Dropdown menu example

Ähnlich wie vertikale Navigationsmenüs eignen sie sich perfekt, um viele Inhalte auf kleinem Raum darzustellen.

Schauen wir uns also an, wie Sie ganz einfach WordPress-Dropdown-Menüs erstellen und diese dann zu Ihrer Website hinzufügen können.

Video-Anleitung

Subscribe to WPBeginner

Wenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, lesen Sie einfach weiter.

Schritt 1: Auswählen eines Themes mit Dropdown-Menü-Unterstützung

WordPress verfügt über ein integriertes Menüverwaltungssystem, aber wie diese Menüs aussehen, hängt von Ihrem WordPress-Theme ab.

Fast alle WordPress-Themes unterstützen standardmäßig Dropdown-Menüs. Einige Themes verfügen jedoch möglicherweise nicht über die richtige Dropdown-Unterstützung. Zu Beginn müssen Sie sicherstellen, dass Ihr Theme Dropdown-Menüs unterstützt.

Woher wissen Sie, ob Ihr Theme die Dropdown-Navigation unterstützt?

Wenn Sie das Theme aus dem offiziellen WordPress-Repository heruntergeladen haben, besuchen Sie einfach die Seite des Themes und klicken Sie auf die Schaltfläche „Vorschau“, um eine Live-Demo zu sehen.

Previewing a WordPress theme

Sie können dann überprüfen, ob die Demo ein Dropdown-Menü enthält.

Wenn Sie ein Premium-WordPress-Theme verwenden, hat der Entwickler möglicherweise eine Live-Demo auf seiner Website. Sie können auch in der Dokumentation des Themes nach weiteren Informationen suchen.

Wenn Sie immer noch unsicher sind, können Sie jederzeit den Entwickler um Hilfe bitten. Weitere Informationen zu diesem Thema finden Sie in unserem Leitfaden, wie Sie richtig um WordPress-Support bitten und diesen erhalten.

Wenn Ihr WordPress-Theme keine Dropdown-Menüs unterstützt, müssen Sie ein Theme finden, das dies tut. Viele Tipps finden Sie in unserem Leitfaden zur Auswahl des perfekten WordPress-Themes.

Um Ihnen zu helfen, finden Sie hier einige ausgezeichnete Themes, die Dropdown-Menüs unterstützen:

  • Astra – Ein Mehrzweck-WordPress-Theme, das mit mehreren Startseiten und einer Vielzahl von Funktionen ausgestattet ist.
  • StudioPress-Themes – Diese professionellen Themes, die auf dem Genesis-Theme-Framework basieren, sollen dazu beitragen, dass Ihre Website schneller lädt.
  • OceanWP – Ein beliebtes WordPress-Theme, das für alle Arten von Websites geeignet ist.
  • Ultra – Dieses Drag-and-Drop-WordPress-Theme, das auf dem Themify-Builder basiert, verfügt über wunderschöne Vorlagen und flexible Themenoptionen.
  • Divi – Ein beliebtes Theme von Elegant Themes, das den Divi Page Builder verwendet und zahlreiche Drag-and-Drop-Funktionen, einschließlich Dropdown-Menüs, bietet.

Werfen wir also einen Blick darauf, wie man ein Dropdown-WordPress-Menü erstellt.

Schritt 2: Erstellen eines Navigationsmenüs in WordPress

Beginnen wir mit der Erstellung eines einfachen Menüs.

Wenn Sie bereits ein Navigationsmenü auf Ihrer Website eingerichtet haben, können Sie zum nächsten Schritt übergehen.

Gehen Sie dazu im WordPress-Dashboard auf Design “ Menüs und klicken Sie dann auf den Link „Neues Menü erstellen“.

Create a menu

Hinweis: Wenn Sie stattdessen Design “ Editor sehen, , dann bedeutet das, dass Ihr Theme die vollständige Website-Bearbeitung (FSE) unterstützt. In diesem Fall können Sie zum Abschnitt FSE weiter unten übergehen.

Als nächstes müssen Sie einen Namen für das Navigationsmenü eingeben.

Sie können also alles verwenden, was Ihnen hilft, das Menü im WordPress-Verwaltungsbereich zu identifizieren.

Menu name

Nachdem Sie einen Titel in das Feld „Menüname“ eingegeben haben, klicken Sie auf „Menü erstellen“. WordPress wird nun ein leeres Menü für Sie erstellen.

Als Nächstes müssen Sie die obersten Links in das Navigationsmenü einfügen. Dies sind die Elemente, die in der obersten Zeile Ihres Dropdown-Menüs erscheinen und als übergeordnete Elemente für alle anderen Beiträge und Seiten fungieren.

In der linken Spalte kreuzen Sie einfach das Kästchen neben jeder Seite an, die Sie hinzufügen möchten. Klicken Sie dann auf die Schaltfläche „Zum Menü hinzufügen“.

Add pages to menu

Diese Seiten werden nun in der rechten Spalte unter „Menüstruktur“ angezeigt.

Sie können auch Blogbeiträge und Kategorien auswählen oder benutzerdefinierte Links hinzufügen. Ausführlichere Anweisungen finden Sie in unserer Anleitung zum Hinzufügen eines Navigationsmenüs in WordPress.

Schritt 3: Hinzufügen von Unterpunkten zu einem Menü

Als Nächstes müssen wir Unterpunkte hinzufügen, die innerhalb des Dropdown-Menüs erscheinen werden. Sie können einen Unterpunkt unter jedem bestehenden Menüpunkt hinzufügen.

In dieser Anleitung zeigen wir Ihnen, wie Sie Themenkategorien unter dem Menüpunkt „Blog“ hinzufügen, aber die Schritte sind ähnlich, egal welchen Inhalt Sie hinzufügen.

Wählen Sie in der linken Spalte einfach alle Seiten aus, die Sie als Unterpunkte hinzufügen möchten, und klicken Sie dann auf die Schaltfläche „Zum Menü hinzufügen“. Ihre Einträge erscheinen nun in der rechten Spalte.

New menu items added to the menu

Standardmäßig erscheinen diese Links jedoch alle als reguläre Menüpunkte, d. h. sie werden der obersten Zeile hinzugefügt.

Wir müssen sie stattdessen zu Unterelementen eines übergeordneten Elements machen.

Ziehen Sie dazu einfach einen Menüpunkt per Drag & Drop und platzieren Sie ihn unter dem gewünschten übergeordneten Element. Verschieben Sie ihn dann einfach etwas nach rechts, und er wird zu einem Unterpunkt.

Adding sub menu items to create a dropdown menu

Wiederholen Sie nun diesen Vorgang für jeden Unterpunkt, den Sie in der Dropdown-Liste anzeigen möchten.

Wenn Sie mit der Gestaltung des Menüs zufrieden sind, vergessen Sie nicht, auf die Schaltfläche „Menü speichern“ zu klicken, um Ihre Änderungen zu speichern.

Schritt 4: Veröffentlichen Sie Ihr Dropdown-Menü

Wenn Sie ein Menü bearbeiten, das sich bereits auf Ihrer Website befindet, werden die Besucher Ihre Änderungen sofort sehen.

Wenn Sie jedoch ein neues Menü erstellen, müssen Sie einen Speicherort für dieses Menü wählen.

Jedes WordPress Theme hat seine eigenen Positionen für das Menü, die Sie im Abschnitt „Menüeinstellungen“ auf der rechten Seite der Ansicht finden können. Aktivieren Sie einfach die Box neben der Position, die Sie verwenden möchten, und klicken Sie dann auf den Button „Menü speichern“.

Choose theme location

Alternativ können Sie auch individuelle Navigationsmenüs in Ihr WordPress Theme einfügen.

Danach können Sie Ihre Website besuchen, um das Dropdown-Menü in Aktion zu sehen.

Erstellen eines Dropdown-Menüs mit dem Full-Site-Editor

Wenn Sie ein blockbasiertes Thema wie Hestia Pro verwenden, können Sie mit dem Full-Site-Editor ein Dropdown-Menü zu jedem beliebigen Teil Ihrer Website hinzufügen.

Um loszulegen, gehen Sie einfach im WordPress-Dashboard auf Themes „ Editor.

Opening the WordPress full-site editor (FSE)

Standardmäßig wird im Full-Site-Editor die Home-Vorlage Ihres Themes angezeigt.

Um ein Dropdown-Menü zu einem anderen Teil Ihrer Website hinzuzufügen, klicken Sie entweder auf „Vorlagen“ oder „Muster“.

The WordPress full-site editor (FSE)

Der Editor zeigt nun eine Liste aller Vorlagen oder Vorlagenteile an, aus denen Ihr WordPress-Theme besteht.

Klicken Sie einfach auf den Bereich, in dem Sie das Dropdown-Menü hinzufügen möchten. Wenn Sie z. B. ein Hauptnavigationsmenü erstellen, wählen Sie in der Regel den Teil der Kopfzeilenvorlage aus.

The WordPress full-site editor (FSE)

WordPress zeigt nun eine Vorschau der Vorlage oder des Vorlagenteils an.

Um diese Vorlage zu bearbeiten, klicken Sie auf das kleine Bleistiftsymbol.

Editing a WordPress header template using the full-site editor (FSE)

Klicken Sie anschließend auf das blaue „+“-Symbol in der oberen linken Ecke.

Geben Sie in der erscheinenden Suchleiste „Navigation“ ein.

Adding a navigation block to a WordPress block-enabled template

Wenn der richtige Block erscheint, ziehen Sie ihn auf Ihren Entwurf und legen ihn ab.

Klicken Sie einfach auf diesen Block, um ihn auszuwählen, und Sie sehen alle verschiedenen Einstellungen, die Sie zur Anpassung des Navigationsblocks verwenden können.

Sie können z. B. das Layout ändern, die Anzeigeeinstellungen bearbeiten, die Farbe des Textes und des Hintergrunds ändern und die Schriftgröße anpassen.

How to create a dropdown menu using the full-site editor (FSE)

Um die Seiten der obersten Ebene zu Ihrem Menü hinzuzufügen, klicken Sie einfach auf die Schaltfläche „+“.

Geben Sie in dem daraufhin angezeigten Popup den Titel oder die URL der Seite ein, die Sie hinzufügen möchten. Wenn die richtige Seite angezeigt wird, klicken Sie darauf, um sie dem Menü hinzuzufügen.

Creating a dropdown menu using the full-site editor (FSE)

Wiederholen Sie diesen Vorgang, um alle Einträge der obersten Ebene in das Dropdown-Menü aufzunehmen.

Danach können Sie jedem übergeordneten Element ein Untermenü hinzufügen.

Klicken Sie im rechten Menü auf das gepunktete Symbol neben dem übergeordneten Element. Wählen Sie dann „Untermenü-Link hinzufügen“.

Creating a submenu using the full-site editor (FSE)

Geben Sie in dem daraufhin angezeigten Popup den Titel oder die URL der Seite ein, die Sie im Dropdown-Menü anzeigen möchten.

Wenn die richtige Seite angezeigt wird, klicken Sie darauf, um sie als Untermenüpunkt hinzuzufügen.

Creating a sub-menu using the WordPress full-site editor (FSE)

Wiederholen Sie diese Schritte nun einfach für alle Elemente, die Sie im Dropdown-Menü anzeigen möchten.

Wenn Sie mit der Gestaltung des Menüs zufrieden sind, klicken Sie auf „Speichern“, um Ihre Änderungen zu speichern.

Saving your WordPress dropdown menu

Wenn Sie nun Ihre Website besuchen, werden Sie das Dropdown-Menü in Aktion sehen.

Tipps zum Erstellen interaktiver Dropdown-Menüs

Navigationsmenüs sind wichtig, denn sie sind die erste Anlaufstelle für Besucher, die interessante Inhalte oder bestimmte Informationen suchen.

Wenn Sie sie richtig einsetzen, können sich die Besucher auf Ihrer Website besser zurechtfinden. Es wird Ihnen auch helfen, mehr Konversionen und Verkäufe zu erzielen und gleichzeitig Ihre Seitenaufrufe zu erhöhen und Ihre Absprungrate zu verringern.

In diesem Sinne finden Sie hier einige Tipps zur Erstellung hilfreicher und benutzerfreundlicher Dropdown-Menüs.

1. Mehrstufige Dropdown-Menüs erstellen

In dieser Anleitung haben wir Ihnen gezeigt, wie Sie eine oberste Zeile und einen Satz von Unterelementen erstellen können. Sie können jedoch auch einen Unterpunkt unter einem anderen Unterpunkt hinzufügen, um mehrstufige Dropdown-Menüs zu erstellen.

Multi-level dropdown menu

Dies kann für Websites nützlich sein, die viele Inhalte oder viele verschiedene Inhaltskategorien haben.

Wenn Sie z. B. ein Online-Geschäft betreiben, könnten Sie eine Kategorie „Elektronik“ und eine Unterkategorie „Laptop“ haben. Sie können aber auch weitere Unterkategorien haben, wie z. B. „Apple Laptops“ oder „Laptoptaschen und -koffer“.

In diesem Fall kann es sinnvoll sein, ein mehrstufiges Dropdown zu erstellen. Ziehen Sie dazu einfach eine beliebige Seite unter einen Unterpunkt und verschieben Sie sie leicht nach rechts.

Multi level menus

2. Mehrere Dropdown-Menüs erstellen

Sie können so viele Dropdown-Menüs erstellen, wie Sie möchten, und diese dann in verschiedenen Bereichen Ihrer Website anzeigen. Sie könnten zum Beispiel ein Dropdown-Menü erstellen, das nur Kategorien anzeigt.

Dies eignet sich hervorragend für Ihre Produktseiten, aber Sie können auch ein einzigartiges Dropdown-Menü für Ihre Homepage erstellen, damit die Kunden verschiedene Bereiche Ihrer Website finden können, wie z. B. das Kontaktformular und den Blog.

How to add multiple dropdown menus to your WordPress website

Erstellen Sie einfach ein neues Dropdown-Menü nach dem gleichen Verfahren wie oben beschrieben, und verwenden Sie dann die Einstellungen für den Standort, um festzulegen, wo dieses Dropdown-Menü auf Ihrer Website angezeigt wird.

3. Menüs mit einer Live-Vorschau erstellen

Wenn Ihnen die Erstellung Ihres Dropdown-Menüs im Dashboard zu kompliziert wird, können Sie zum WordPress Customizer wechseln. Gehen Sie einfach auf Darstellung “ Anpassen, um den WordPress-Theme-Customizer live zu starten.

Klicken Sie hier auf die Registerkarte „Menüs“ und wählen Sie dann das Navigationsmenü aus. In der linken Spalte sehen Sie nun einen Drag-and-Drop-Editor und in der rechten Spalte eine Live-Vorschau Ihrer Website.

How to create a dropdown menu in the WordPress Customizer

Sie können nun an Ihrem Menü arbeiten, und alle Änderungen werden in der Live-Vorschau angezeigt.

4. Erstellen eines großen Mega-Menüs als Dropdown in WordPress

Wenn Sie viele Inhalte haben, werden Sie möglicherweise Schwierigkeiten haben, diese mit einem Standard-Dropdown-Menü übersichtlich zu organisieren.

Stattdessen können Sie die gesamte Struktur Ihrer Website in einem Mega-Menü anzeigen, das nur erscheint, wenn die Nutzer mit dem Mauszeiger über das Hauptmenü fahren.

Mega menu example

Mega-Menüs sind einem Dropdown-Menü ähnlich, können aber viel mehr Links, Untermenüs und andere Elemente anzeigen. Detaillierte Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Erstellen eines Mega-Menüs in WordPress.

4. Exportieren Sie Ihre Dropdown-Menüs

Betreiben Sie mehrere WordPress-Websites? In diesem Fall möchten Sie vielleicht dasselbe Menü-Layout und -Design für alle Ihre Websites verwenden.

Die Standard WordPress Import/Export Funktion erlaubt es Ihnen nicht, Menüs selbst zu importieren und zu exportieren, aber es ist möglich, Ihre Menüs mit einem Plugin zu übertragen.

Eine detaillierte Schritt-für-Schritt-Anleitung finden Sie in unserer Anleitung zum Importieren und Exportieren von Navigationsmenüs in WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie ganz einfach ein Dropdown-Menü in WordPress erstellen können. Vielleicht interessiert Sie auch unsere Anleitung zum Hinzufügen einer Suchleiste zu Ihrem Menü oder unsere Expertenauswahl der besten Tutorials zum Meistern von WordPress-Navigationsmenüs.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

31 KommentareEine Antwort hinterlassen

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Loud Pen says

    Thank you so much for this helpful tutorial! My theme doesn’t have the „Menus“ option underneath Appearance so I couldn’t figure out how to create a dropdown menu. This really helped me! I just needed a dropdown menu for one page. Thanks again!

  3. Arianna says

    I knew that my template supported dropdown menus, but I couldn’t figure out how to add them until I read this tutorial! Thank you so much!!

  4. Kraig Schuneman says

    Hi,

    Is it possible to bring up slideshows in the dropdowns? Our club website uses slideshows created in WordPress. The short codes work fine when added to the page. We’d like to create a dynamic dropdown for when the slideshows get added or deleted. Are there any code samples? We’d be happy with a static dropdown too. There are a lot of slideshows and we’ve made an HTML dropdown but can get them to work with short code, just links. Thank you for your time, Kraig.

  5. Alborz says

    Hi,

    Im wondering how you can create a subitem that hovers into another subitem. You said in the video that you could subitem a subitem that shows it whenever you hover on the first subitem, but the your page shows all the subitems directly without hovering it.

    Im wondering how I can create a dropdown menu that has a subitem which also can be hovered over into more items.

    • WPBeginner Support says

      As long as your theme has styling for it, you can do that by putting the items you want under the additional submenu another step to the right similar to how we do it in the animation. The menu item would then be further to the right and beneath the menu item in your menu.

      Admin

  6. Chris Carnes says

    This was exactly the information I was looking for. I am completely new to WP & your site is a great resource.

  7. Ed says

    Hi, I am trying to create a dropdown menu under the toggles, and not under the main headings. Can this be done and how. Thanks so much.

    • WPBeginner Support says

      If you mean you only want the dropdowns when someone clicks an arrow, that would be determined by the theme you are using. You would want to check with the support for your specific theme to see if that is an option.

      Admin

  8. Daniel says

    Hi!! Is there a way to make the main menu just a title for the sub menus and not a page you can access? I made an empty page so I can create a menu with sub menus, and it works, but you can click the main menu, which is an empty page, so I want it to just be a menu with no page.

    • WPBeginner Support says

      You certainly can, the easiest method would be to create a page for each form and link to the pages in the menu.

      Admin

  9. Mohamed Mohidin says

    if my theme doesn’t support dropdown menu what can i do is there something or solutions to do without changing my the theme

    thanks

    • WPBeginner Support says

      You would want to reach out to the support for your specific theme to see if there are plans for adding support for it as a starting point.

      Admin

  10. Kam says

    Thank you for this helpful post.

    How can I add sub items where the parent page is just a title and cannot be accessed as a page on the menu bar?

    E.g.

    Sports (not accessible as a page)
    (this is a page and viewable)
    (page and viewable)

    • WPBeginner Support says

      You would want to be careful that you don’t confuse your users with a menu item that does not work but you can set a custom URL menu item to # for that.

      Admin

  11. Harish Nemade says

    If I have a blog with all types of categories in it and I want to create a dropdown menu of each category in my single ‘www.example.com/blog/‘ page. So how can I create a dropdown in one page?

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.