List component List
The List component displays a set of vertically organized elements. It’s a flexible container that can be used for menus, navigation lists or action blocks within an interface. It can be customized according to different themes, visual variants, sizes and densities.
Each ListItem child can contain additional elements (prepend, append) and be individually styled.
Examples of list Base The basic example shows a simple list with no particular configuration. It uses the default size and style for a neutral presentation.
Active Demonstrates how to put one or more elements in an active state to reflect a current selection or navigation.
Density Shows the different densities available (compact , comfortable , default ), which influence the vertical spacing between items.
Disabled Displays disabled elements, indicating that they are not interactive. Useful for indicating that an option is temporarily unavailable.
Nav Enables specific rendering for lists used as navigation (nav ). This automatically adjusts the style to be more consistent in a menu bar or side panel.
Size Shows the different sizes applicable to the list (xs to full ). This allows the component to be adapted to various UI contexts (sidebar, modal, etc.).
Variant Shows visual variants (filled , text , outline ) to adapt the overall appearance of the list to graphic needs.
Snippet Enables you to compose each ListItem with additional elements such as icons, badges or any other content via the prepend and append slots.
API Reference List
props type description default type_extend ref $bindable HTMLElement Direct access to DOM element undefined is enum Makes the component <nav> or <div >. divnav | divnav boolean Enable specific rendering for navigation lists false dark boolean Enable dark theme for component. false light boolean Enable light theme for the component. false color string Applies a custom color to text or icons. undefined background string Apply a custom background color. undefined density enum Controls vertical density for elements defaultcompact | comfortable | defaultrounded string Container edge radius mdvariant enum Sets the visual style of the List. filledoutline | text | filledsize enum | {enum: enum} Defines the global size of the list mdxs | sm | md | lg | xl | full
ListItem
props type description default type_extend ref $bindable HTMLElement Direct access to DOM element undefined is enum Makes the component <a> or <button> or div. divbutton | a | divhref string Add path or url undefined dark boolean Enable dark theme for component. false light boolean Enable light theme for the component. false color string Applies a custom color to text or icons. undefined background string Apply a custom background color. undefined rounded string Controls item rounding (none, sm, md, lg, etc.). mdactive boolean Displays active status false disabled boolean Deactivates the ListItem, preventing any interaction. false noRipple boolean Deactivates ripple effect false append Snippet Content displayed after the main content undefined prepend Snippet Content displayed before main content undefined
Variables CSS variable default description –-list-color–-kit-on-containerText color –-list-background–-kit-containerBackground color –-list-radius--kit-radius-mdList edge radius
A well-structured List can easily be enriched with Separators or elements in a Card .