Components

Link List

Structured Navigation with Style & Logic.

The Link List component enables you to display a collection of links in a well-structured, styled list format, ideal for menus, footers, or sidebar navigation. Whether it’s a simple list of pages or a multi-level navigation system, the Link List offers control, flexibility, and intelligent defaults, like automatically opening when a link matches the active route.

With support for dynamic nesting, visual indicators, and fine-tuned theming, it enables intuitive navigation experiences while remaining easy to maintain and style.

Effortless Navigation Handling

  1. Auto-Open For better UX.
    Link Lists detect current route matches.

  2. Multi-Level Menus.
    Nest other Link Lists for deep navigation.

  3. Smart Toggle Behavior.
    Control visibility on load or lock menus open.

Styling You Control

  1. Apply themes to all parts of the component.
    Maintain consistent brand design effortlessly.

  2. Detect current matches to apply styles.
    Make navigation state visually obvious.

  3. Flexible Indicators
    Help users understand the menu state.

Use Cases

The Link List component is ideal for:

  • Sidebar or header navigation menus

  • Multi-level menus with dropdowns or nested lists

  • Footer menus are structured into categories

  • Accordions or collapsible sections in mobile navigation

  • Dynamically styled link collections based on the current route

  • Menus where the context should automatically expand based on the page

Its smart detection of the current route allows it to open automatically when relevant. meaning users get helpful visual cues without needing to write extra logic.

Configuration Options & Features

The Link List component brings clarity, flexibility, and performance to your site navigation, enhancing the user experience while making it easier than ever to structure and manage navigation menus.

List Heading

Defines the title or clickable area that toggles the visibility of the link list content. This is your menu’s trigger area, commonly used in dropdown headers or collapsible sidebars.

Indicator

A visual icon or image that indicates the open or closed state of the Link List.

Automatically rotates 180° when the list is toggled, adding clarity and visual feedback.

Links

The main link content area, which offers a flexible structure and allows for deeply nested, expandable navigation menus, and can consist of:

  • Single Link components

  • Nested Link List components (for multi-level menus)

Closable

Boolean toggle to define whether the list can be closed.

If set to false, the content remains visible at all times.

Initial Open State

Set whether the menu opens or closes by default.

If a link inside the list matches the active route, it will automatically open.

Component Theme

Theme applied to the overall Link List wrapper.

Sets spacing, borders, and layout behavior.

Trigger Theme

Applied to the trigger area (the heading area).

Controls font, colors, spacing, hover styles, and other elements.

Content THeme

Applied to the collapsible content area where links reside.

Helpful in showing or hiding transitions, padding, or background styling.

Element Theme

Used on each link element inside the list.

Provides consistent styling across your navigation items.

Active Element Theme

Adds a style to link items that partially match the current route (e.g. /blog when visiting /blog/article).

Exact Active Element Theme

Adds a style when a link exactly matches the current route (e.g. /contact on /contact).