List

You can use the list component to show multiple types of list items. Each Elistitem can contain an image, text, symbol, or HTML content. List items can also be grouped by EListGroup or EListRecursive in a more advanced way. Demo Here

Import

import EListItem from "@components/Elements/EList/EListItem";
import EListGroup from "@components/Elements/EList/EListGroup";
import EListRecursive from "@components/Elements/EList/EListRecursive";

Usage

EListItem

This element typically used to represent a single item within a list.

<EListItem> Lorem ipsum dolor sit amet. </EListItem>

EListGroup

This is a collection of multiple EListItem components grouped together.

<EListGroup>
    <EListItem> 1 </EListItem>
    <EListItem> 2 </EListItem>
    <EListGroup title="3" expandable>
        <EListItem> 3.1 </EListItem>
        <EListItem> 3.2 </EListItem>
        <EListGroup title="3.3" expandable>
            <EListItem> 3.3.1 </EListItem>
            <EListItem> 3.3.2 </EListItem>
            <EListItem> 3.3.3 </EListItem>
        </EListGroup>
    </EListGroup>
</EListGroup>

EListRecursive

EListRecursive allows you to create expandable and collapsible lists that adapt to any level of nesting.

It iterates through your list data, recursively rendering each EListItem or EListGroup while preserving the hierarchical structure. This feature is especially useful for menus, category trees, or any scenario involving items with sub-items.

const ListRecursiveExample = () => {
   const listItems = [
       {title: "1"},
       {
           title: "2",
           children: [
               {title: "2.1"},
               {title: "2.2"},
               {
                   title: "2.3",
                   children: [
                       {title: "2.3.1"},
                       {title: "2.3.2"},
                       {
                           title: "2.3.3",
                           to: '/user',
                           icon: {
                               name: 'User',
                               iconPack: 'iconsax'
                           }
                       }
                   ]
               }
           ]
       }
   ]

   return listItems.map((item, index) => (
       <EListRecursive key={index}>{item}</EListRecursive>
   ));
};

export default ListRecursiveExample;

Each object in the array of list items can have the following properties:

• title:String
• icon:String
• to:String
• href:String
• target:String
• variant:String
• children:Array

Note

To display an icon, add your desired icon name from iconsax or tabler icons. More info about icons here

Props

• For EListGroup component, the following props are available:

Prop	Type	Default	Note
activeState	[String, Number]	-	List's active prop.
width	[String, Number]	-	Sets the list's width. Default unit is px.
height	[String, Number]	-	Sets the list's height. Default unit is px.
wrapperTag	String	"li"	Define list group wrapper tag
focusable	Boolean	false	Make list items focusable.
border	Boolean	false	Creates list items with borders.
rounded	Boolean	false	It creates a circular list items.
square	Boolean	false	Squares the corners of the list item.
compact	Boolean	false	Specifies that the list items should render in smaller size than normal. It moves the list content as it expands and collapses controlled by mouse hover. Typically used for creating a sidebar.
compactHover	Boolean	false	Open compact list on hover, only works with compact prop Typically used for creating a sidebar.
title	String	-	Adds a title to the EListGroup element.
className	String	-	Overrides or extends the component's styles.
clearableActive	Boolean	true	Toggles the active state of item on another click on the same item.
size	String	"md"	The list element has three predefined sizes: sm, md, lg.
expandable	Boolean	false	It shows items in a vertically scrolling multi-level list.
translate	Boolean	false	Enables list item's Translation. (see more info about translation on the localization page)
color	String	"primary"	The given color is applied to the list - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
variant	String	"fill"	The list element can be represented in two ways: fill and line. When a list item is active or hovered over, fill displays a background and line displays an underlining.
icon	Object	-	By using icon prop the EListGroup element will be visualized with an Icon. More Info about icons here.

• For EListItem component, the following props are available:

Prop	Type	Default	Note
value	String	-	Each list item can have a unique value that identifies the active item within the group. (if not defined the EListGroup uses the index of each EListItem to specify the selected item)
rounded	Boolean	false	It creates a circular list items.
square	Boolean	false	Squares the corners of the list item.
buttonClassName	String	-	Overrides or extends the btn styles.
to	String	-	This attribute creates a linked list item.
href	String	-	This attribute creates a linked list item.
target	String	"_self"	It specifies where to open the linked document. _self opens the linked document in the same frame as it was clicked.
className	String	-	Overrides or extends the component's styles.(wrapper)
size	String	"md"	The list element has three predefined sizes: sm, md, lg.
translate	Boolean	false	Enables list item's Translation. (see more info about translation on the localization page)
color	String	"primary"	The given color is applied to the list - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
icon	Object	-	By using icon prop the EListItem element will be visualized with an Icon. More Info about icons here.
variant	String	"fill"	The list element can be represented in two ways: fill and line. When a list item is active or hovered over, fill displays a background and line displays an underlining.

• For EListRecursive component, the following props are available:

Prop	Type	Default	Note
compact	Boolean	false	Specifies that the list items should render in smaller size than normal. It moves the list content as it expands and collapses controlled by mouse hover. Typically used for creating a sidebar.
compactHover	Boolean	false	Open compact list on hover, only works with compact prop Typically used for creating a sidebar.
translate	Boolean	false	Enables list item's Translation. (see more info about translation on the localization page)
rounded	Boolean	false	It creates a circular list items.
square	Boolean	false	Squares the corners of the list item.
className	String	-	Overrides or extends the component's styles.
size	String	"md"	The list element has three predefined sizes: sm, md, lg.
color	String	"primary"	The given color is applied to the list - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
variant	String	"fill"	The list element can be represented in two ways: fill and line. When a list item is active or hovered over, fill displays a background and line displays an underlining.

Note

• In EListRecursive, the variant prop can be used in two ways. You can either set the variant property individually on each object within the listItems array to give each item a unique variant, or you can set the variant prop on the EListRecursive component itself, which will apply that variant to all list items by default.

• As you can see, the EListGroup and EListItem components share a few properties (variant, rounded, square, color) which can be used in two ways:

approach 1

<EListGroup title="Group" color="danger" expandable>
    {/* color:danger */}
    <EListItem> Item 1 </EListItem> {/* color:danger */}
    <EListItem> Item 2 </EListItem> {/* color:danger */}
</EListGroup>

approach 2

<EListGroup title="Group" color="danger" expandable>
    {/* color:danger */}
    <EListItem color="warning"> Item 1 </EListItem> {/* color:warning */}
    <EListItem> Item 2 </EListItem> {/* color:danger */}
</EListGroup>

Styling Active Router Link

It is critical to visually indicate the current active page when showing list items in the navigation bar. to achieve this you can add href or to prop to each EListItem and when the current route matched the prop value, the list item will be activated.

WARNING

if you want to show the active list with EListRecursive, make sure to add href or to properties to the listItems object

Active List Items

• Use the focusable prop to apply an active style to list items when they are clicked. In this approach, you won’t have control over the active list item, as the functionality is built-in.
• Use the onChange and activeState props if you wish to maintain control over the active list item.
• You can assign each EListItem a unique value , or the EListGroup will use the index of each item to identify the active list item.

export const FocusableList = () => {
    const [value, setValue] = useState(0); // Zero-based, The first list item is focused.
    // you can also add a unique value to each list item to be used instead of the index.

    return (
        <EListGroup
            focusable
            // or
            onChange={(event, value) => setValue(value)}
            activeState={value}
        >
            <EListItem>
                List Item 1
            </EListItem>
            <EListItem>
                List Item 2
            </EListItem>
        </EListGroup>
    );
};

Callback Functions

The EListGroup component contains following callback functions.

Function	Description
onChange	Component's onChange event fired when active value state is changed. function(event: React.SyntheticEvent, activeItem: [String, Number]) => void 👇 • event: The event source of the callback. • activeItem: Active item value

Children

The EListGroup component provides a children props that enable you to customize the content.

Children	Description
EListItem	Component’s items.

The EListItem component provides a children props that enable you to customize the content.

Children	Description
✔️	Item's content.