Navigation

Chameleon pill navbar

Eine Reihe von Navigationslinks in einer dunklen Kapsel, wobei sich der aktive Link in seine eigene Pille aufteilt und der Rest sich wieder um ihn herum schließt.

Chameleon pill navbar verwenden

Eine Reihe von Navigationslinks in einer dunklen Kapsel, wobei sich der aktive Link in seine eigene Pille aufteilt und der Rest sich wieder um ihn herum schließt.

Teste die Vorschau mit Maus und Tastatur. Prüfe den sichtbaren Fokus und das Layout auf schmalen Bildschirmen in deiner eigenen Seite. Nenne deinem Agenten die Nummer oder den Bezeichner, um diese Komponente abzurufen.

Eigenschaften: activeIndex, accent, cornerRadius

Welche Frameworks sind verfügbar?

Der Katalog enthält diese Versionen: react, vue, svelte, astro, html. Die Vorschau auf dieser Seite verwendet React.

Wie greife ich auf die Implementierung zu?

Code, Framework-Versionen und Installationsbefehle sind im Arbeitsbereich oben verfügbar.

Verbinde deinen Agenten

Ähnliche Komponenten

2349Expanding card navbarNavigationEine schlanke, abgerundete Navigationsleiste, deren Hamburger-Schalter sie nach unten in eine Reihe farbiger Linkkarten erweitert, wobei die Links jeder Karte gestaffelt ins Blickfeld geraten.

2194Morphing Pill NavbarNavigationEine Reihe von Navigationsbeschriftungen in einer dunklen Pille, wobei die aktive Beschriftung in ihre eigene gefüllte Pille aufbricht und die verbleibenden Beschriftungen sich zu einer zweiten Pille zusammenschließen, die um sie herum neu fließt.

2106Adjacent hover menubarNavigationEine Menüleiste im Desktop-Stil, in der durch Klicken auf ein Menü dieses geöffnet wird. Sobald Sie den Mauszeiger über ein benachbartes Menü bewegen, wird dieses ohne zusätzlichen Klick direkt dorthin weitergeleitet.

2107App MenubarNavigationEine horizontale Menüleiste im Desktop-Stil, in der durch Klicken auf eine Beschriftung der obersten Ebene deren Dropdown-Liste geöffnet wird. Sobald eine geöffnet ist, wechselt der Mauszeiger über die anderen Beschriftungen direkt zu deren Menüs, ohne dass ein zusätzlicher Klick erforderlich ist.

1914ARIA Tablist ResizeNavigationEine vollständig zugängliche Roving-Tabindex-Tab-Liste mit einer gleitenden Pillen-Hervorhebung, bei der sich die Größe des Bedienfeldrahmens nahtlos an den angezeigten Tab-Inhalt anpasst.

1916Auto height tabsNavigationEine Registerkartengruppe, deren Inhaltscontainer beim Wechseln der Registerkarten die Höhe stufenlos an die Größe jedes Panels anpasst, anstatt zu springen oder leeren Raum zu hinterlassen.