Tabs, Accordions, Breadcrumbs und Pagination

Tabs, Accordions, Breadcrumbs, Pagination, Stepper und Linklisten.

6 Components · 15 Variants

Kategorie wechseln

Kleine Teile, die zeigen, wo du bist

Navigationselemente beantworten auf jeder Seite zwei Fragen, wo bin ich und wohin kann ich. Die sechs Components hier folgen den Tastaturmustern, die Menschen erwarten, Pfeiltasten in Tabs, Pos1 und Ende in Listen, und sie bleiben ohne JavaScript lesbar.

Reiter wechseln zwischen Ansichten derselben Sache, unterstrichen, als Pillen, segmentiert oder senkrecht. Das Akkordeon faltet lange Inhalte zu Zeilen auf nativen details, gut für FAQ und technische Daten. Brotkrumen zeigen, wo eine Seite liegt, und werden am Handy zu einem Zurück-Link. Seitenzahlen blättern durch Ergebnisse mit Zahlen oder einem Mehr-laden-Knopf. Die Schrittanzeige zeigt die Schritte eines Ablaufs, die Linkliste gruppiert Links in Menüs und Einstellungen.

Nutze Tabs nur für gleichwertige Inhalte, den ersten Tab sehen oft als einzigen alle. Setz Breadcrumbs auf jede Seite unterhalb der ersten Ebene, sie speisen auch strukturierte Daten. Nummeriere Seiten mit echten Links, damit Suchmaschinen ihnen folgen.

Auf dieser Seite

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

Akkordeon3
Linkliste3
Reiter3
Brotkrumen2
Seitenzahlen2
Schrittanzeige2

accordion

Akkordeon

Aufklappzeilen auf nativem details: ohne JavaScript lesbar, eine oder mehrere offen, weich, wo der Browser es kann.

Eine zur Zeit
Karten
Mit Icons

Props und Details

Eine zur Zeit

Linien zwischen den Zeilen, eine öffnen schließt die andere. Das Plus wird zum Minus.

Installv1.0.0

aiw add @ai-website/accordion

Bringt mit utils, kit, icon

Usage

<Accordion type="single" marker="plus" items={[{ value, title, content }]} />

Source

Karten

Getrennte Flächen, mehrere zugleich offen. Die offene Karte hebt sich ein wenig.

Installv1.0.0

aiw add @ai-website/accordion

Bringt mit utils, kit, icon

Usage

<Accordion type="multiple" variant="cards" items={…} />

Source

Mit Icons

Eine umrandete Box mit Icons und einer Zeile unter jedem Titel, für Shop- und Service-Details.

Installv1.0.0

aiw add @ai-website/accordion

Bringt mit utils, kit, icon

Usage

<Accordion variant="contained" items={[{ value, icon, title, subtitle, content }]} />

Source

link-list

Linkliste

Listen von Links: ein Seitenmenü mit aktivem Eintrag, gruppierte Einstellungszeilen und eine ruhige Ressourcenliste.

Seitenmenü
Einstellungszeilen
Ressourcenliste

Props und Details

Seitenmenü

Abschnitte, Icons, Zähler und die aktive Seite mit kleinem Akzentbalken.

Installv1.0.0

aiw add @ai-website/link-list

Bringt mit utils, kit, icon

Usage

<LinkList label="Workspace" sections={[{ title, items: [{ label, href, icon, badge, active }] }]} />

Source

Einstellungszeilen

Gruppierte Zeilen mit Icons, aktuellen Werten und Pfeilen, wie man sie vom Telefon kennt.

Installv1.0.0

aiw add @ai-website/link-list

Bringt mit utils, kit, icon

Usage

<LinkList variant="rows" sections={[{ title: "Account", items: [{ label, href, icon, value }] }]} />

Source

Ressourcenliste

Links mit einer Zeile Beschreibung, externe mit dem Pfeil nach außen.

Installv1.0.0

aiw add @ai-website/link-list

Bringt mit utils, kit, icon

Usage

<LinkList variant="plain" sections={[{ items: [{ label, href, description, external }] }]} />

Source

tabs

Reiter

Unterstrichen, Pillen, segmentiert und senkrecht, mit Icons und Zählern, Pfeiltasten und gleitender Markierung.

Unterstrichen
Pillen und segmentiert
Senkrecht

Props und Details

Unterstrichen

Der Standard für Seiten und Panels. Die Reihe scrollt auf dem Telefon seitlich, der aktive Reiter bleibt sichtbar.

Installv1.0.0

aiw add @ai-website/tabs

Bringt mit utils, kit, icon

Usage

<Tabs label="Project" items={[{ value, label, icon, count, content }]} />

Source

Pillen und segmentiert

Pillen für Filter über Inhalten, segmentiert für zwei bis vier gleichwertige Ansichten.

Installv1.0.0

aiw add @ai-website/tabs

Bringt mit utils, kit, icon

Usage

<Tabs variant="pills" … />  <Tabs variant="segmented" fullWidth … />

Source

Senkrecht

Eine Seitenliste für Einstellungen ab Tablet, eine scrollende Reihe auf dem Telefon. Pfeil hoch und runter bewegen.

Installv1.0.0

aiw add @ai-website/tabs

Bringt mit utils, kit, icon

Usage

<Tabs variant="vertical" label="Settings" items={…} />

Source

breadcrumbs

Brotkrumen

Wo eine Seite steht, als Pfad, gekürzter Pfad mit Menü oder als Leiste. Auf dem Telefon ein Zurück-Link.

Trenner
Gekürzt und eingefasst

Props und Details

Trenner

Pfeil, Schrägstrich oder Punkt. Die aktuelle Seite ist kein Link und für Screenreader markiert.

Installv1.0.0

aiw add @ai-website/breadcrumbs

Bringt mit utils, kit, icon, dropdown-menu

Usage

<Breadcrumbs separator="chevron|slash|dot" items={[…]} />

Source

Gekürzt und eingefasst

Tiefe Pfade falten ihre Mitte in ein Menü. Die eingefasste Leiste sitzt gut auf Bildern und Kopfbereichen.

Installv1.0.0

aiw add @ai-website/breadcrumbs

Bringt mit utils, kit, icon, dropdown-menu

Usage

<Breadcrumbs maxItems={3} items={…} />  <Breadcrumbs variant="contained" items={…} />

Source

pagination

Seitenzahlen

Zahlen mit Lücken, schlicht zurück und weiter, eine Ergebniszeile und Mehr laden. Kompakt auf dem Telefon.

Zahlen
Mehr laden

Props und Details

Zahlen

Nachbarn der aktuellen Seite, erste und letzte, Lücken dazwischen. Telefone bekommen „5 von 12“.

Installv1.0.1

aiw add @ai-website/pagination

Bringt mit utils, kit, icon

Usage

<Pagination total={12} defaultPage={5} summary={{ from: 41, to: 50, count: 118 }} />

Source

Mehr laden

Für Feeds und Shops: wie weit du bist, und ein Knopf für den nächsten Schwung. Neue Karten kommen nacheinander dazu.

Installv1.0.1

aiw add @ai-website/pagination

Bringt mit utils, kit, icon

Usage

<LoadMore shown={24} count={96} loading={loading} onLoadMore={next} />

Source

stepper

Schrittanzeige

Die Schritte eines Ablaufs, waagerecht oder senkrecht, mit erledigt, aktuell, offen und Fehler in Worten.

Waagerecht
Senkrecht

Props und Details

Waagerecht

Zahlen oder Icons auf einer Spur, die sich füllt. Telefone bekommen den Schrittnamen und einen geteilten Balken.

Installv1.0.1

aiw add @ai-website/stepper

Bringt mit utils, kit, icon

Usage

<Stepper current={1} steps={[{ title: "Cart" }, …]} />

Source

Senkrecht

Platz für einen Satz je Schritt, für Onboarding und Sendungsverfolgung. Ein Fehler bleibt sichtbar, bis er behoben ist.

Installv1.0.1

aiw add @ai-website/stepper

Bringt mit utils, kit, icon

Usage

<Stepper orientation="vertical" current={2} steps={[…, { title, description, error: true }]} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Navigation stehen.

Kleine Teile, die zeigen, wo du bist

Auf dieser Seite

Eine zur Zeit

Karten

Mit Icons

Seitenmenü

Einstellungszeilen

Ressourcenliste

Unterstrichen

Pillen und segmentiert

Senkrecht

Trenner

Gekürzt und eingefasst

Zahlen

Mehr laden

Waagerecht

Senkrecht

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit