Navigationsleiste mit Mehr-Menü
Wird der Platz knapp, wandern die letzten Links in ein Mehr-Menü mit Zähler; zieh am Griff oder ändere die Breite.
Einstellungen
Code
<div class="uvq12-pp"><nav aria-label="Hauptmenü"><a class="lg" href="#"><i aria-hidden="true"></i>Nord</a><ul class="ls"><li><a href="#" aria-current="page">Start</a></li><li><a href="#">Produkt</a></li><li><a href="#">Preise</a></li><li><a href="#">Kunden</a></li><li><a href="#">Blog</a></li><li><a href="#">Doku</a></li><li><a href="#">Jobs</a></li><li><a href="#">Kontakt</a></li></ul><div class="mr"><button type="button" aria-expanded="false" aria-controls="uvq12-pp-m"><span>Mehr</span><b>0</b><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg></button><ul class="mm" id="uvq12-pp-m"><li><a href="#" aria-current="page">Start</a></li><li><a href="#">Produkt</a></li><li><a href="#">Preise</a></li><li><a href="#">Kunden</a></li><li><a href="#">Blog</a></li><li><a href="#">Doku</a></li><li><a href="#">Jobs</a></li><li><a href="#">Kontakt</a></li></ul></div><span class="hd" aria-hidden="true"></span></nav></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Das Priority-Plus-Muster für responsive Menüs: Links bleiben in der Leiste, solange sie passen, die übrigen wandern in ein Mehr-Menü mit einem Zähler, der bei jeder Änderung hüpft. Ein ResizeObserver rechnet bei jeder Breite neu, daher funktioniert es in Seitenleisten, Karten und echten Headern. Die aktuelle Seite ist an beiden Stellen markiert, das Menü reagiert auf Pfeile und Escape.
Teste es mit dem Breitenregler oder am Griff und wähle Haupt- und Zweitfarbe für den aktiven Link. Sortiere die Links nach Wichtigkeit, denn die letzten wandern zuerst.