Menüleisten und Umschalter

Menüleisten mit Tastaturbedienung, schwebende Aktionen, die dem Scrollen folgen, und Sprachumschalter für jedes Layout.

3 Components · 14 Variants

Kategorie wechseln

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

Schwebende Aktionen5
Sprachwahl5
Menüleiste4

floating-actions

Schwebende Aktionen

Nach oben, Lesefortschritt, eine mobile Aktionsleiste, ein klebender Call to Action und ein Kontakt-Dock. Sie folgen dem Scrollen der Seite.

Nach oben
Lesefortschritt
Aktionsleiste
Klebender Call to Action
Kontakt-Dock

Props und Details

Nach oben

Erscheint nach dem ersten Screen. Der Ring füllt sich mit der Seite, beim Hovern steht der gelesene Anteil daneben.

Installv1.0.0

aiw add @ai-website/floating-actions

Bringt mit utils, kit, button, icon

Usage

<FloatingActions variant="back-to-top" threshold={400} showPercent />

Source

Lesefortschritt

Eine feine Linie oben füllt sich beim Lesen, eine Leiste mit Titel und verbleibenden Minuten gleitet herein.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/floating-actions

Bringt mit utils, kit, button, icon

Usage

<FloatingActions variant="reading-progress" title="…" minutes={6} />

Source

Aktionsleiste

Anrufen, Route und Termin für ein lokales Geschäft. Auf dem Telefon eine volle Leiste, auf größeren Screens eine schwebende Pille mit Live-Status. Weicht beim Runterlesen aus.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/floating-actions

Bringt mit utils, kit, button, icon

Usage

<FloatingActions variant="mobile-action-bar" status="…" actions={[{ icon, label, href, primary }]} />

Source

Klebender Call to Action

Gleitet herein, sobald der Hero weg ist. Oben auf breiten Screens, unten am Daumen auf dem Telefon. Lässt sich schließen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/floating-actions

Bringt mit utils, kit, button, icon

Usage

<FloatingActions variant="sticky-cta" title="…" action={{ label, href }} dismissible />

Source

Kontakt-Dock

Ein beschrifteter Knopf, der beim Lesen zum Symbol wird und die Kontaktwege nacheinander öffnet. Escape schließt ihn.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/floating-actions

Bringt mit utils, kit, button, icon

Usage

<FloatingActions variant="contact-dock" label="…" heading="…" actions={[{ icon, label, detail, href }]} />

Source

language-switcher

Sprachwahl

Sprach- und Regionswahl mit einem echten Link je Sprache. Sprachen mit ihrem eigenen Namen, nie mit einer Flagge.

Dropdown
Umschalter
Liste im Fuß
Sprachhinweis
Regionswahl

Props und Details

Dropdown

Ein ruhiger Knopf im Header. Das Menü zeigt jede Sprache im eigenen Namen und in der Seitensprache, Pfeiltasten führen hindurch.

Im Studio öffnen

Umschalter

Zwei oder drei kurze Codes, eine Markierung gleitet zur gewählten Sprache. Für Seiten mit wenigen Sprachen.

Installv1.0.0

aiw add @ai-website/language-switcher

Bringt mit utils, kit, button, icon, motion

Usage

<LanguageSwitcher variant="segmented" value="de" languages={[…]} />

Source

Liste im Fuß

Jede Sprache als Link in der letzten Zeile des Footers. Die Linie unter der aktuellen zeichnet sich beim Hovern.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/language-switcher

Bringt mit utils, kit, button, icon, motion

Usage

<LanguageSwitcher variant="inline-list" value="en" languages={[…]} />

Source

Sprachhinweis

Bietet die Seite in der Sprache des Besuchers an, in dieser Sprache geschrieben. Bleiben faltet den Hinweis weg.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/language-switcher

Bringt mit utils, kit, button, icon, motion

Usage

<LanguageSwitcher variant="suggestion-banner" languages={[…]} suggestion={{ code: "de", message, action, stay }} />

Source

Regionswahl

Regionen als Tabs, Länder mit ihren Sprachen und eine Suche, die beim Tippen filtert.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/language-switcher

Bringt mit utils, kit, button, icon, motion

Usage

<LanguageSwitcher variant="region-picker" title="…" regions={[{ id, title, countries }]} country="Germany" value="de-DE" />

Source

menubar

Menüleiste

Menüs in einer Leiste wie in einer Desktop-App. Ein Tab-Stopp, Pfeile laufen durch die Menüs und wechseln zwischen ihnen, Häkchen und Auswahl merken sich ihren Zustand.

Klassisch
Icons und Beschriftung
Schwebende Leiste
Senkrechte Leiste

Props und Details

Klassisch

Textmenüs unter einem Dokumenttitel, mit Tastenkürzeln, einem Ansichtsmenü mit Häkchen und Zoom, und der letzten Aktion in der Statuszeile. Auf dem Telefon scrollt die Leiste seitlich.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/menubar

Bringt mit utils, kit, icon, dropdown-menu, popover

Usage

<Menubar label="Document" menus={[{ id: "file", label: "File", items: [{ label: "New document", shortcut: "⌘N" }] }]} onAction={(menu, item) => run(item)} />

Source

Icons und Beschriftung

Menüs mit Icon über der Beschriftung, wie in Büro-Apps. Das Diagrammmenü wählt eine Art, das Formatmenü schaltet fett und kursiv.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/menubar

Bringt mit utils, kit, icon, dropdown-menu, popover

Usage

<Menubar variant="icons" label="Sheet" menus={[{ id: "insert", label: "Insert", icon: "plus-circle", items }]} />

Source

Schwebende Leiste

Icon-Menüs auf einer Arbeitsfläche, die Leiste schwebt unten und ihre Menüs öffnen nach oben. Die Beschriftungen werden vorgelesen und beim Darüberfahren gezeigt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/menubar

Bringt mit utils, kit, icon, dropdown-menu, popover

Usage

<Menubar variant="floating" label="Canvas tools" menus={tools} />

Source

Senkrechte Leiste

Die Leiste als Seitenschiene. Hoch und runter laufen durch die Menüs, rechts öffnet eins daneben, links geht zurück. Auf dem Telefon schrumpft die Schiene auf Icons.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/menubar

Bringt mit utils, kit, icon, dropdown-menu, popover

Usage

<Menubar variant="vertical" label="Site admin" menus={sections} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Menüleisten und Umschalter stehen.

Auf dieser Seite

Nach oben

Lesefortschritt

Aktionsleiste

Klebender Call to Action

Kontakt-Dock

Dropdown

Umschalter

Liste im Fuß

Sprachhinweis

Regionswahl

Klassisch

Icons und Beschriftung

Schwebende Leiste

Senkrechte Leiste

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit