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*

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.

<template>
  <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>
</template>

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.

<template>
  <EListRecursive v-for="item in listItems" :children="item"/>
</template>

<script setup>
  const listItems = ref([
    {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'
              }
            }
          ]
        }
      ]
    }
  ]);
</script>

Each object in the array of listItems 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
modelValue	[Number,String]	-	list's active prop
width	String	-	Sets the list's width.
height	String	-	Sets the list's height.
wrapperTag	String	"li"	Define list group wrapper tag
border	Boolean	false	Creates list items with borders.
rounded	Boolean	false	It creates a circular list items.
square	Boolean	false	Removes rounded corners of the element.
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.
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.
icon	Object	-	By using icon prop the EListGroup 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 EListItem component, the following props are available:

Prop	Type	Default	Note
modelValue	[String, Number]	-	list's active prop
value	[String, Number]	-	Each list item can have a unique value that identifies the active item within the group.
rounded	Boolean	false	It creates a circular list items.
square	Boolean	false	Removes rounded corners of the element.
buttonClasses	String	-	Overrides or extends the btn styles.
to	[String, Object]	-	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.
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
children	[Array, Object]	false	Each object defined in your navigation file.
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.
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

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

approach 1

<template>
  <EListGroup title="Group" color="danger" expandable>
    <!-- color:danger -->
    <EListItem> Item 1</EListItem>
    <!-- color:danger -->
    <EListItem> Item 2</EListItem>
    <!-- color:danger -->
    <EListItem> Item 3</EListItem>
    <!-- color:danger -->
  </EListGroup>
</template>

approach 2

<template>
  <EListGroup title="Group" color="success" expandable>
    <!-- color:success -->
    <EListItem color="warning"> Item 1</EListItem>
    <!-- color:warning -->
    <EListItem color="danger"> Item 2</EListItem>
    <!-- color:danger -->
    <EListItem> Item 3</EListItem>
    <!-- color:success -->
  </EListGroup>
</template>

Styling Active Router Link

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

Control Active List Items

You can highlight the active list items by using v-model.

<template>
  <EListGroup v-model="selectedList">
    <EListItem :value="1" color="primary">
      List Item 1
    </EListItem>
    <EListItem :value="2" color="secondary">
      List Item 2
    </EListItem>
  </EListGroup>
</template>

<script setup>
  const selectedList = ref(0)
</script>

WARNING

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

Emits

The EListGroup component contains following emits.

Emit	Description
update:modelValue	Emitted when the local ref's value is mutated.

Slots

The EListGroup and EListItem components provide a default slot that enable you to customize the content.

Slot	Description
default	The default Vue slot.