Komponenten

Link Liste

Strukturierte Navigation mit Stil und Logik.

Mit der Komponente Link Liste können Sie eine Sammlung von Links in einem gut strukturierten, gestylten Listenformat anzeigen, das sich ideal für Menüs, Fußzeilen oder die Navigation in der Seitenleiste eignet. Ob es sich um eine einfache Liste von Seiten oder ein mehrstufiges Navigationssystem handelt, die Linkliste bietet Kontrolle, Flexibilität und intelligente Standardeinstellungen, wie z. B. das automatische Öffnen, wenn ein Link mit der aktiven Route übereinstimmt.

Durch die Unterstützung von dynamischer Verschachtelung, visuellen Indikatoren und fein abgestimmter Thematisierung ermöglicht sie intuitive Navigationserlebnisse und ist gleichzeitig einfach zu pflegen und zu gestalten.

Mühelose Handhabung der Navigation

  1. Automatisches Öffnen für bessere UX.
    Link-Listen erkennen aktuelle Route.

  2. Mehrstufige Menüs.
    Verschachteln Sie andere Link-Listen.

  3. Intelligentes Toggle-Verhalten.
    Kontrollieren Sie die Sichtbarkeit beim Laden.

Styling Sie kontrollieren

  1. Exaktes Theming aller Komponenten-Teile.
    Müheloses einheitliches Markendesign.

  2. Erkennen Sie aktuelle Übereinstimmungen.
    Den Navigationsstatus visuell deutlich machen.

  3. Flexible Indikatoren.
    Helfen den Zustand des Menüs zu verstehen.

Anwendungsfälle

Die Komponente Linkliste ist ideal für:

  • Navigationsmenüs in der Seitenleiste oder Kopfzeile

  • Mehrstufige Menüs mit Dropdowns oder verschachtelten Listen

  • Footer-Menüs sind in Kategorien gegliedert

  • Accordions oder ausklappbare Abschnitte in der mobilen Navigation

  • Dynamisch gestaltete Linksammlungen basierend auf der aktuellen Route

  • Menüs, bei denen sich der Kontext automatisch je nach Seite erweitern sollte

Die intelligente Erkennung der aktuellen Route ermöglicht es, dass sie sich automatisch öffnet, wenn sie relevant ist, d.h. die Benutzer erhalten hilfreiche visuelle Hinweise, ohne dass sie zusätzliche Logik schreiben müssen.

Konfigurationsoptionen und Funktionen

Die Link Listen Komponente bringt Klarheit, Flexibilität und Leistung in die Navigation Ihrer Website. Sie verbessert das Benutzererlebnis und macht die Strukturierung und Verwaltung von Navigationsmenüs einfacher denn je.

Listen Überschrift

Definiert den Titel oder den klickbaren Bereich, der die Sichtbarkeit des Inhalts der Linkliste umschaltet. Dies ist der Auslösebereich Ihres Menüs, der üblicherweise in Dropdown-Kopfzeilen oder ausklappbaren Seitenleisten verwendet wird.

Indikator

Ein visuelles Symbol oder Bild, das den offenen oder geschlossenen Zustand der Linkliste anzeigt.

Dreht sich automatisch um 180°, wenn die Liste umgeschaltet wird, was für mehr Klarheit und visuelles Feedback sorgt.

Links

Der Hauptlink-Inhaltsbereich, der eine flexible Struktur bietet und tief verschachtelte, erweiterbare Navigationsmenüs ermöglicht, kann aus folgenden Elementen bestehen:

  • Einzelne Link-Komponenten

  • verschachtelten Linklisten-Komponenten (für mehrstufige Menüs)

Schließbar

Schalter um festzulegen, ob die Liste geschlossen werden kann.

Bei der Einstellung false bleibt der Inhalt jederzeit sichtbar.

Initialer Öffnungs-Status

Legen Sie fest, ob das Menü standardmäßig geöffnet oder geschlossen werden soll.

Wenn ein Link innerhalb der Liste mit der aktiven Route übereinstimmt, wird er automatisch geöffnet.

Komponenten Theme

Das Theme, das auf den gesamten Linklisten-Wrapper angewandt wird.

Legt Abstände, Rahmen und Layout-Verhalten fest.

Trigger Theme

Wird auf den Auslösebereich (den Link Listen Überschriften Bereich) angewendet.

Steuert Schriftart, Farben, Abstände, Schwebestile und andere Elemente.

Content THeme

Wird auf den zusammenklappbaren Inhaltsbereich angewendet, in dem sich Links befinden.

Hilfreich bei der Anzeige oder Ausblendung von Übergängen, Auffüllungen oder Hintergrundstyling.

Element Theme

Wird für jedes Link-Element innerhalb der Liste verwendet.

Sorgt für ein einheitliches Styling Ihrer Navigationselemente.

Aktives Element Theme

Fügt Stile hinzu, um Links, die teilweise mit der aktuellen Route übereinstimmen (z. B. /blog beim Besuch von /blog/article) speziell hervorzuheben.

Exakt-Aktives Element Theme

Fügt Stile hinzu, wenn ein Link genau mit der aktuellen Route übereinstimmt (z. B. /contact auf /contact).