Unternavigation

Navigation innerhalb einer Seite und auf dem Telefon. Abschnittsleisten mit Scroll-Spy, Inhaltsverzeichnisse und Tab-Leisten unten.

2 Components · 10 Variants

Kategorie wechseln

bottom-nav

Bottom Nav

Die Tab-Leiste unten am Telefon für Web-Apps und mobile Websites. Volle Breite auf dem Telefon, eine schwebende Leiste in der Mitte auf dem Tablet, auf dem Desktop aus dem Weg. Ein Licht gleitet zum aktiven Tab, Badges zählen, ein Hauptknopf öffnet Schnellaktionen und Mehr öffnet ein Sheet.

Mit Beschriftung
Mittlere Aktion
Schwebend
Weicht beim Scrollen
Mit Mehr-Sheet

Props und Details

Mit Beschriftung

Fünf Tabs mit Icon und Beschriftung. Ein weiches Licht gleitet hinter das aktive Icon, das Icon federt beim Tippen, Zahlen und Punkte zeigen Neues.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/bottom-nav

Bringt mit utils, kit, icon

Usage

<BottomNav items={[{ label: "Home", icon: "home", active: true }, { label: "Orders", icon: "bag", badge: 2 }, …]} />

Source

Mittlere Aktion

Ein erhabener Hauptknopf zwischen den Tabs. Er wird zum Schließen-Knopf und lässt drei Schnellaktionen über einem weichen Schleier aufsteigen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/bottom-nav

Bringt mit utils, kit, icon

Usage

<BottomNav variant="center-action" items={[…]} action={{ label: "New", icon: "plus", actions: [{ label: "Send money", icon: "send" }, …] }} />

Source

Schwebend

Eine gläserne Pille über randlosen Bildern. Eine Linse gleitet zum aktiven Tab, der Inhalt scheint durch die Unschärfe.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/bottom-nav

Bringt mit utils, kit, icon

Usage

<BottomNav variant="floating" items={[…]} />

Source

Weicht beim Scrollen

Eine schmale Leiste mit Icons und einem Punkt unter dem aktiven. Sie gleitet weg, während du nach unten liest, und kommt zurück, sobald du nach oben scrollst. Scrolle im Telefon, um es zu sehen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/bottom-nav

Bringt mit utils, kit, icon

Usage

<BottomNav variant="hide-on-scroll" items={[…]} />

Source

Mit Mehr-Sheet

Vier Tabs und Mehr. Mehr öffnet aus der Leiste ein Sheet mit allen weiteren Bereichen, das Licht wandert dabei zu Mehr. Escape und der Schleier schließen es.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/bottom-nav

Bringt mit utils, kit, icon

Usage

<BottomNav variant="with-sheet" items={[…]} more={{ label: "More", items: [{ label: "Invoices", icon: "receipt" }, …] }} />

Source

sticky-subnav

Sticky Subnav

Navigation innerhalb einer langen Seite. Sie weiß, welchen Abschnitt du liest, springt per Klick dorthin und bleibt in Reichweite. Pills, eine Produktleiste, ein Inhaltsverzeichnis, Kapitel-Segmente und Randpunkte, jede mit eigenem Telefon-Layout.

Props und Details

Pills

Eine Reihe Pills unter dem Seitenkopf, die oben stehen bleibt. Das Licht gleitet zum Abschnitt, den du liest, auf dem Telefon rollt die Reihe mit.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sticky-subnav

Bringt mit utils, kit, button, icon

Usage

<StickySubnav variant="pills" items={[{ id: "overview", label: "Overview" }, …]} />

Source

Produktleiste

Name und Preis links, Links mit gleitender Unterstreichung, die Hauptaktion rechts. Sobald der erste Abschnitt vorbei ist, füllt sich die Aktion.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sticky-subnav

Bringt mit utils, kit, button, icon

Usage

<StickySubnav variant="product" title="Atlas Trail 28" subtitle="from $189" action={{ label: "Buy now", href: "/buy" }} items={[…]} />

Source

Inhaltsverzeichnis

Eine Spalte neben dem Text mit einer Schiene, die sich beim Lesen füllt, und einer Marke am aktuellen Teil. Unter 1024 px wird sie zur Leiste oben, die die Liste aufklappt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sticky-subnav

Bringt mit utils, kit, button, icon

Usage

<aside><StickySubnav variant="toc" heading="On this page" items={[…]} /></aside>

Source

Kapitel

Eine Leiste aus Segmenten, jedes füllt sich, während du sein Kapitel liest. Nummern und Namen auf großen Bildschirmen, auf dem Telefon das aktuelle Kapitel und seine Stelle.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sticky-subnav

Bringt mit utils, kit, button, icon

Usage

<StickySubnav variant="chapters" items={[…]} />

Source

Randpunkte

Punkte am rechten Rand für Onepager, ein Etikett gleitet bei Hover und Fokus heraus. Telefone bekommen unten einen Chip mit Abschnittsnamen und Pfeilen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sticky-subnav

Bringt mit utils, kit, button, icon

Usage

<StickySubnav variant="dots" items={[…]} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Unternavigation stehen.

Mit Beschriftung

Mittlere Aktion

Schwebend

Weicht beim Scrollen

Mit Mehr-Sheet

Pills

Produktleiste

Inhaltsverzeichnis

Kapitel

Randpunkte

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit