@imaginario27/air-ui-ds 1.10.2 → 1.11.0

package/CHANGELOG.md

@@ -5,6 +5,30 @@ All notable changes to this package are documented in this file.
 Historical releases were reconstructed from git history (GitHub repository) and npm publish dates.
 Future releases will include detailed entries generated with Changesets.
 
+## 1.10.2 - 2026-04-14
+
+Release type: patch.
+Commits found in range: 3.
+
+### Fixed
+
+1. fix typecheck errors in selects ([eee12f8](https://github.com/imaginario27/air-ui/commit/eee12f87045fcb12556f3f38e80f87e5078a0d5c))
+2. remove duplicated imports ([a277959](https://github.com/imaginario27/air-ui/commit/a2779590034a360e1685193455e978391870a69f))
+3. fix duplicated imports ([5a324a3](https://github.com/imaginario27/air-ui/commit/5a324a3ea43ae5fdf794e345b54c57207860efbd))
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.10.1 - 2026-04-09
+
+Release type: patch.
+Commits found in range: 1.
+
+### Fixed
+
+1. fix TypeScript errors in TabBar.vue ([273925b](https://github.com/imaginario27/air-ui/commit/273925bdca00ac9ad58c1c43de5668ed78a85da1))
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.10.0 - 2026-04-09
 
 Release type: minor.

package/components/dropdowns/DropdownMenu.vue

@@ -32,6 +32,7 @@
                     <div
                         v-if="isOpen"
                         ref="dropdown"
+                        data-dropdown-menu-panel
                         v-bind="$attrs"
                         :class="[
                             'bg-background-surface',
@@ -55,26 +56,70 @@
                             :onClose="close"
                         />
                         <template v-else-if="items?.length">
-                            <DropdownMenuItem
+                            <template
                                 v-for="(item, index) in items"
                                 :key="index"
-                                :actionType="item.actionType"
-                                :text="item.text"
-                                :icon="item.icon"
-                                :size="item.size"
-                                :type="item.type"
-                                :userDisplayName="item.userDisplayName"
-                                :userProfileImg="item.userProfileImg"
-                                :imgUrl="item.imgUrl"
-                                :alt="item.alt"
-                                :helpText="item.helpText"
-                                :to="item.to"
-                                :isExternal="item.isExternal"
-                                :hasSeparator="item.hasSeparator"
-                                :disabled="disabled || item.disabled"
-                                :prefetchOn
-                                @click="handleClick(item.callback)"
-                            />
+                            >
+                                <DropdownSectionItem
+                                    v-if="item.sectionTitle"
+                                    :text="item.text"
+                                    :icon="item.icon"
+                                />
+
+                                <DropdownMenu
+                                    v-else-if="canOpenNested(item)"
+                                    :items="item.children"
+                                    :position="DropdownPosition.RIGHT_TOP"
+                                    :positionXOffset="nestedMenuGap"
+                                    :positionYOffset="0"
+                                    :trigger="trigger"
+                                    :hasShadow
+                                    :hasBorder
+                                    :disabled="disabled || item.disabled"
+                                    :prefetchOn
+                                    :level="level + 1"
+                                >
+                                    <template #activator>
+                                        <DropdownMenuItem
+                                            :actionType="DropdownActionType.ACTION"
+                                            :text="item.text"
+                                            :icon="item.icon"
+                                            :size="item.size"
+                                            :type="item.type"
+                                            :userDisplayName="item.userDisplayName"
+                                            :userProfileImg="item.userProfileImg"
+                                            :imgUrl="item.imgUrl"
+                                            :alt="item.alt"
+                                            :helpText="item.helpText"
+                                            :hasSeparator="item.hasSeparator"
+                                            :disabled="disabled || item.disabled"
+                                            :hasNestedLevels="true"
+                                            :prefetchOn
+                                        />
+                                    </template>
+                                </DropdownMenu>
+
+                                <DropdownMenuItem
+                                    v-else
+                                    :actionType="resolveItemActionType(item)"
+                                    :text="item.text"
+                                    :icon="item.icon"
+                                    :size="item.size"
+                                    :type="item.type"
+                                    :userDisplayName="item.userDisplayName"
+                                    :userProfileImg="item.userProfileImg"
+                                    :imgUrl="item.imgUrl"
+                                    :alt="item.alt"
+                                    :helpText="item.helpText"
+                                    :to="item.to"
+                                    :isExternal="item.isExternal"
+                                    :hasSeparator="item.hasSeparator"
+                                    :disabled="disabled || item.disabled"
+                                    :hasNestedLevels="hasNestedItems(item)"
+                                    :prefetchOn
+                                    @click="handleClick(item.callback)"
+                                />
+                            </template>
                         </template>
                     </div>
                 </Transition>
@@ -91,6 +136,7 @@
                 <div 
                     v-if="isOpen"
                     ref="dropdown"
+                    data-dropdown-menu-panel
                     v-bind="$attrs" 
                     :class="[
                         'bg-background-surface',
@@ -116,25 +162,70 @@
                         :onClose="toggle"
                     />
                     <template v-else-if="items?.length && !$slots['items']">
-                        <DropdownMenuItem 
-                            v-for="(item, index) in items" :key="index"
-                            :actionType="item.actionType"
-                            :text="item.text"
-                            :icon="item.icon"
-                            :size="item.size"
-                            :type="item.type"
-                            :userDisplayName="item.userDisplayName"
-                            :userProfileImg="item.userProfileImg"
-                            :imgUrl="item.imgUrl"
-                            :alt="item.alt"
-                            :helpText="item.helpText"
-                            :to="item.to"
-                            :isExternal="item.isExternal"
-                            :hasSeparator="item.hasSeparator"
-                            :disabled="disabled || item.disabled"
-                            :prefetchOn
-                            @click="handleClick(item.callback)"
-                        />
+                        <template
+                            v-for="(item, index) in items"
+                            :key="index"
+                        >
+                            <DropdownSectionItem
+                                v-if="item.sectionTitle"
+                                :text="item.text"
+                                :icon="item.icon"
+                            />
+
+                            <DropdownMenu
+                                v-else-if="canOpenNested(item)"
+                                :items="item.children"
+                                :position="DropdownPosition.RIGHT_TOP"
+                                :positionXOffset="nestedMenuGap"
+                                :positionYOffset="0"
+                                :trigger="trigger"
+                                :hasShadow
+                                :hasBorder
+                                :disabled="disabled || item.disabled"
+                                :prefetchOn
+                                :level="level + 1"
+                            >
+                                <template #activator>
+                                    <DropdownMenuItem
+                                        :actionType="DropdownActionType.ACTION"
+                                        :text="item.text"
+                                        :icon="item.icon"
+                                        :size="item.size"
+                                        :type="item.type"
+                                        :userDisplayName="item.userDisplayName"
+                                        :userProfileImg="item.userProfileImg"
+                                        :imgUrl="item.imgUrl"
+                                        :alt="item.alt"
+                                        :helpText="item.helpText"
+                                        :hasSeparator="item.hasSeparator"
+                                        :disabled="disabled || item.disabled"
+                                        :hasNestedLevels="true"
+                                        :prefetchOn
+                                    />
+                                </template>
+                            </DropdownMenu>
+
+                            <DropdownMenuItem 
+                                v-else
+                                :actionType="resolveItemActionType(item)"
+                                :text="item.text"
+                                :icon="item.icon"
+                                :size="item.size"
+                                :type="item.type"
+                                :userDisplayName="item.userDisplayName"
+                                :userProfileImg="item.userProfileImg"
+                                :imgUrl="item.imgUrl"
+                                :alt="item.alt"
+                                :helpText="item.helpText"
+                                :to="item.to"
+                                :isExternal="item.isExternal"
+                                :hasSeparator="item.hasSeparator"
+                                :disabled="disabled || item.disabled"
+                                :hasNestedLevels="hasNestedItems(item)"
+                                :prefetchOn
+                                @click="handleClick(item.callback)"
+                            />
+                        </template>
                     </template>
                 </div>
             </Transition>
@@ -197,6 +288,14 @@ const props = defineProps({
         default: Trigger.CLICK,
         validator: (value: Trigger) => Object.values(Trigger).includes(value),
     },
+    level: {
+        type: Number as PropType<number>,
+        default: 1,
+    },
+    nestedMenuGap: {
+        type: Number as PropType<number>,
+        default: 8,
+    },
     disabled: {
         type: Boolean as PropType<boolean>,
         default: false,
@@ -224,6 +323,24 @@ const close = () => {
     isPositioned.value = false
 }
 
+const MAX_NESTED_LEVELS = 3
+
+const hasNestedItems = (item: DropdownMenuItem) => {
+    return Array.isArray(item.children) && item.children.length > 0
+}
+
+const canOpenNested = (item: DropdownMenuItem) => {
+    return props.level < MAX_NESTED_LEVELS && hasNestedItems(item)
+}
+
+const resolveItemActionType = (item: DropdownMenuItem) => {
+    // Items with children are always ACTION items (never links)
+    if (hasNestedItems(item)) {
+        return DropdownActionType.ACTION
+    }
+    return item.actionType ?? DropdownActionType.ACTION
+}
+
 const clearCloseTimer = () => {
     if (closeTimer.value !== null) {
         globalThis.clearTimeout(closeTimer.value)
@@ -317,6 +434,11 @@ const shouldCloseFromTarget = (target: Node) => {
 
     if (!dropdownEl || !activatorEl) return false
 
+    const targetElement = target as HTMLElement | null
+    if (targetElement?.closest('[data-dropdown-menu-panel]')) {
+        return false
+    }
+
     return !dropdownEl.contains(target) && !activatorEl.contains(target)
 }
 

package/components/dropdowns/DropdownMenuItem.vue

@@ -53,6 +53,12 @@
                 :imgUrl="userProfileImg"
                 :size="AvatarSize.XS"
             />
+
+            <Icon
+                v-if="hasNestedLevels"
+                name="mdi:chevron-right"
+                iconClass="text-icon-neutral-subtle ml-auto"
+            />
         </div>
         <p 
             v-if="helpText"
@@ -125,6 +131,10 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    hasNestedLevels: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
     prefetchOn: {
         type: [String, Object] as PropType<PrefetchOnStrategy>,
         default: PrefetchOn.VISIBILITY,

package/components/dropdowns/DropdownSectionItem.vue

@@ -0,0 +1,28 @@
+<template>
+    <div
+        :class="[
+            'flex items-center gap-3 w-full',
+            'px-3 py-2',
+            'text-sm font-semibold text-text-neutral-subtle',
+            'border-b border-border-default',
+            'select-none',
+        ]"
+    >
+        <Icon
+            v-if="icon"
+            :name="icon"
+            iconClass="!text-icon-neutral-subtle"
+        />
+
+        <span>{{ text }}</span>
+    </div>
+</template>
+<script setup lang="ts">
+defineProps({
+    text: {
+        type: String as PropType<string>,
+        default: 'Section title',
+    },
+    icon: String as PropType<string>,
+})
+</script>

package/components/dropdowns/DropdownSelect.vue

@@ -151,31 +151,41 @@
 
                     <!-- Filtered options -->
                     <div v-if="filteredOptions.length > 0">
-                        <DropdownSelectItem
+                        <template
                             v-for="(option, index) in filteredOptions"
                             :key="index"
-                            :type="type"
-                            :text="option.text"
-                            :icon="option.icon"
-                            :userDisplayName="option.userDisplayName"
-                            :userProfileImg="option.userProfileImg"
-                            :imgUrl="option.imgUrl"
-                            :alt="option.alt"
-                            :helpText="option.helpText"
-                            :isSelected="isSelected(option)"
-                            :activeStyle="activeStyle"
-                            :to="option.to"
-                            :isExternal="option.isExternal"
-                            :class="[
-                                hasSeparator && index !== filteredOptions.length - 1 
-                                    ? 'border-b border-border-default' 
-                                    : undefined
-                            ]"
-                            @click="() => { 
-                                handleOptionClick(option)
-                                if (!multiple) onClose()
-                            }"
-                        />
+                        >
+                            <DropdownSectionItem
+                                v-if="option.sectionTitle"
+                                :text="option.text"
+                                :icon="option.icon"
+                            />
+
+                            <DropdownSelectItem
+                                v-else
+                                :type="type"
+                                :text="option.text"
+                                :icon="option.icon"
+                                :userDisplayName="option.userDisplayName"
+                                :userProfileImg="option.userProfileImg"
+                                :imgUrl="option.imgUrl"
+                                :alt="option.alt"
+                                :helpText="option.helpText"
+                                :isSelected="isSelected(option)"
+                                :activeStyle="activeStyle"
+                                :to="option.to"
+                                :isExternal="option.isExternal"
+                                :class="[
+                                    hasSeparator && index !== filteredOptions.length - 1 
+                                        ? 'border-b border-border-default' 
+                                        : undefined
+                                ]"
+                                @click="() => { 
+                                    handleOptionClick(option)
+                                    if (!multiple) onClose()
+                                }"
+                            />
+                        </template>
                     </div>
                     
                     <!-- No Results Message -->

package/components/navigation/nav-sidebar/NavSidebar.vue

@@ -55,7 +55,7 @@
             :isCollapsed
             :class="[
                 !$slots['sidebar-footer'] && '80% lg:90%',
-                isCollapsed && '!px-0 items-center',
+                isCollapsed && 'px-0! items-center',
             ]"
             :style="{
                 height: computedMenuHeight
@@ -72,93 +72,79 @@
 
             <slot name="sidebar-menu-prefix-content" />
 
-            <template v-for="(item, index) in menuItems" :key="index">
-                <!-- Section Title -->
-                <NavSidebarMenuSectionTitle 
-                    v-if="item.isSectionTitle"
-                    :text="item.text"
-                    :icon="item.icon"
-                    :styleType="itemsStyleType"
-                    :isCollapsed
-                    :showCollapseDivider
-                />
-
-                <!-- Collapsed Dropdown using NavSidebarMenuItem as activator -->
-                <template v-else-if="isCollapsed && item.children">
-                    <DropdownMenu
-                        :key="item.text"
-                        :position="index < props.collapsedFlipLimit ? DropdownPosition.RIGHT_TOP : DropdownPosition.RIGHT_BOTTOM"
-                        :positionXOffset="collapsedSubmenuOffset"
-                        :trigger="collapsedSubmenuTrigger"
-                        :style="{ minWidth: `${collapsedSubmenuWidth}px` }"
-                    >
-                        <!-- Use NavSidebarMenuItem as activator -->
-                        <template #activator>
-                            <NavSidebarMenuItem 
-                                :text="item.text"
-                                :icon="item.icon"
-                                :styleType="itemsStyleType"
-                                :textClass="itemsTextClass"
-                                :iconClass="itemsIconClass"
-                                isCollapsed
-                                :showDropdownArrow="false"
-                                :class="itemsCustomClass"
-                            />
-                        </template>
-
-                        <template #items>
-                            <DropdownMenuItem
-                                v-for="(child, childIndex) in item.children"
-                                :key="`${item.text}-${childIndex}`"
-                                :text="child.text"
-                                :type="child.icon ? DropdownItemType.ICON : DropdownItemType.TEXT"
-                                :icon="child.icon"
-                                :to="child.to"
-                            />
-                        </template>
-                    </DropdownMenu>
-                </template>
-
-                <!-- Regular item if not collapsed or no children -->
-                <template v-else>
-                    <NavSidebarMenuItem 
+            <template v-if="isCollapsed">
+                <template v-for="(item, index) in menuItems" :key="`${item.text}-${index}`">
+                    <NavSidebarMenuSectionTitle 
+                        v-if="item.isSectionTitle"
                         :text="item.text"
                         :icon="item.icon"
-                        :to="item.to"
-                        :disabled="item.disabled"
-                        :prefetchOn
                         :styleType="itemsStyleType"
-                        :textClass="itemsTextClass"
-                        :iconClass="itemsIconClass"
-                        :showDropdownArrow="!!item.children"
-                        :isOpen="openItems[index]"
                         :isCollapsed
-                        :class="itemsCustomClass"
-                        @click="item.children ? toggleItem(index) : undefined"
+                        :showCollapseDivider
                     />
 
-                    <!-- Render nested children only when expanded -->
-                    <template v-if="item.children && openItems[index] && !isCollapsed">
-                        <NavSidebarMenuItem
-                            v-for="(child, childIndex) in item.children"
-                            :key="`${index}-${childIndex}`"
-                            :text="child.text"
-                            :icon="child.icon"
-                            :to="child.to"
-                            :disabled="child.disabled"
+                    <template v-else-if="hasChildren(item)">
+                        <DropdownMenu
+                            :items="getCollapsedDropdownItems(item.children ?? [])"
+                            :position="index < props.collapsedFlipLimit ? DropdownPosition.RIGHT_TOP : DropdownPosition.RIGHT_BOTTOM"
+                            :positionXOffset="collapsedSubmenuOffset"
+                            :trigger="collapsedSubmenuTrigger"
+                            :style="{ minWidth: `${collapsedSubmenuWidth}px` }"
+                            :prefetchOn
+                        >
+                            <template #activator>
+                                <NavSidebarMenuItem 
+                                    :text="item.text"
+                                    :icon="item.icon"
+                                    :styleType="itemsStyleType"
+                                    :textClass="itemsTextClass"
+                                    :iconClass="itemsIconClass"
+                                    isCollapsed
+                                    :showDropdownArrow="false"
+                                    :class="itemsCustomClass"
+                                />
+                            </template>
+                        </DropdownMenu>
+                    </template>
+
+                    <template v-else>
+                        <NavSidebarMenuItem 
+                            :text="item.text"
+                            :icon="item.icon"
+                            :to="item.to"
+                            :disabled="item.disabled"
                             :prefetchOn
                             :styleType="itemsStyleType"
-                            :textClass="subItemsTextClass"
-                            :iconClass="subItemsIconClass"
-                            :class="[
-                                'ml-4',
-                                subItemsCustomClass ? subItemsCustomClass : '!font-medium',
-                            ]"
+                            :textClass="itemsTextClass"
+                            :iconClass="itemsIconClass"
+                            isCollapsed
+                            :showDropdownArrow="false"
+                            :class="itemsCustomClass"
                         />
                     </template>
                 </template>
             </template>
 
+            <template v-else>
+                <NavSidebarMenuItemsTree
+                    :items="menuItems"
+                    :isCollapsed
+                    :openItems
+                    :itemsStyleType
+                    :itemsCustomClass
+                    :itemsTextClass
+                    :itemsIconClass
+                    :subItemsCustomClass
+                    :subItemsTextClass
+                    :subItemsIconClass
+                    :thirdLevelItemsCustomClass
+                    :prefetchOn
+                    :showCollapseDivider
+                    :showNestedLevelGuide="showNestedSectionLevelGuide"
+                    @toggle="toggleItem"
+                />
+            </template>
+
             <slot name="sidebar-menu-suffix-content" />
         </NavSidebarMenu>
 
@@ -216,10 +202,26 @@ const props = defineProps({
                 text: 'Item 3',
                 icon: 'mdi:help',
                 children: [
+                    {
+                        isSectionTitle: true,
+                        text: 'Subsection title',
+                        icon: 'mdi:shape-outline',
+                    },
                     {
                         text: 'Subitem 1',
                         icon: 'mdi:help',
-                        to: '/',
+                        children: [
+                            {
+                                isSectionTitle: true,
+                                text: 'Nested subsection title',
+                                icon: 'mdi:format-list-bulleted-square',
+                            },
+                            {
+                                text: 'Third level item',
+                                icon: 'mdi:help-circle-outline',
+                                to: '/',
+                            },
+                        ],
                     },
                     {
                         text: 'Subitem 2',
@@ -324,6 +326,11 @@ const props = defineProps({
     subItemsCustomClass: String as PropType<string>,
     subItemsTextClass: String as PropType<string>,
     subItemsIconClass: String as PropType<string>,
+    thirdLevelItemsCustomClass: String as PropType<string>,
+    showNestedSectionLevelGuide: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
     prefetchOn: {
         type: [String, Object] as PropType<PrefetchOnStrategy>,
         default: PrefetchOn.VISIBILITY,
@@ -332,7 +339,7 @@ const props = defineProps({
 
 // States 
 const isSticky = ref(false)
-const openItems = ref<Record<number, boolean>>({})
+const openItems = ref<Record<string, boolean>>({})
 
 // Emits
 const emit = defineEmits<(e: 'update:isCollapsed', value: boolean) => void>()
@@ -349,29 +356,106 @@ const {
 } = useSidebar()
 const { isMobile } = useIsMobile()
 
+const MAX_NESTING_LEVEL = 3
+
 // Methods
+const hasChildren = (item: SidebarMenuItem) => {
+    return Array.isArray(item.children) && item.children.length > 0
+}
+
+const getNodeKey = (path: number[]) => {
+    return path.join('-')
+}
+
+const parseNodeKey = (key: string) => {
+    return key.split('-').map(Number)
+}
+
+const isSameParent = (a: number[], b: number[]) => {
+    if (a.length !== b.length) return false
+
+    const aParent = a.slice(0, -1)
+    const bParent = b.slice(0, -1)
+
+    return aParent.length === bParent.length && aParent.every((value, index) => value === bParent[index])
+}
+
+const isPrefixPath = (prefix: number[], path: number[]) => {
+    if (prefix.length > path.length) return false
+
+    return prefix.every((value, index) => value === path[index])
+}
+
 const handleScroll = () => {
     if(props.stickOnScroll) {
         isSticky.value = window.scrollY > props.stickyScrollHeight
     }
 }
 
-const toggleItem = (index: number) => {
+const toggleItem = (path: number[]) => {
+    const nodeKey = getNodeKey(path)
+
     if (props.multipleSubmenusOpen) {
-        openItems.value[index] = !openItems.value[index]
+        openItems.value[nodeKey] = !openItems.value[nodeKey]
     } else {
-        const wasOpen = openItems.value[index]
+        const wasOpen = openItems.value[nodeKey]
+
+        const nextOpenItems = Object.fromEntries(
+            Object.entries(openItems.value).filter(([key]) => {
+                const keyPath = parseNodeKey(key)
+
+                // Always close the toggled branch descendants and the branch itself.
+                if (isPrefixPath(path, keyPath)) {
+                    return false
+                }
 
-        // Close all
-        openItems.value = {}
+                // Close siblings at the same level to preserve single-open behavior per level.
+                if (isSameParent(keyPath, path)) {
+                    return false
+                }
+
+                return true
+            })
+        )
 
         // Reopen the one that was toggled if it wasn't already open
         if (!wasOpen) {
-            openItems.value[index] = true
+            nextOpenItems[nodeKey] = true
         }
+
+        openItems.value = nextOpenItems
     }
 }
 
+const getCollapsedDropdownItems = (
+    items: SidebarMenuItem[],
+    level = 2
+): CollapsedDropdownItem[] => {
+    if (level > MAX_NESTING_LEVEL) {
+        return []
+    }
+
+    return items.flatMap((item) => {
+        const hasItemChildren = hasChildren(item)
+        const dropdownItem: CollapsedDropdownItem = {
+            sectionTitle: item.isSectionTitle,
+            text: item.text,
+            to: item.to,
+            icon: item.icon,
+            type: item.icon ? DropdownItemType.ICON : DropdownItemType.TEXT,
+            disabled: Boolean(item.disabled),
+            actionType: item.isSectionTitle
+                ? DropdownActionType.ACTION
+                : DropdownActionType.LINK,
+            children: hasItemChildren && level < MAX_NESTING_LEVEL
+                ? getCollapsedDropdownItems(item.children ?? [], level + 1)
+                : undefined,
+        }
+
+        return [dropdownItem]
+    })
+}
+
 // Computed
 const computedMenuHeight = computed(() => {
     if (slots['sidebar-footer']) {

package/components/navigation/nav-sidebar/NavSidebarMenuItem.vue

@@ -3,14 +3,14 @@
         :is="componentTag"
         v-bind="componentProps"
         :class="[
+            !isCollapsed && 'w-full',
             'flex',
             'items-center',
-            'text-sm',
             'text-left',
-            'font-semibold',
             'rounded-lg',
             'hover:bg-background-neutral-hover',
             'justify-between',
+            levelTextClass,
             spacingClass,
             !isActive && 'text-text-default',
             isActive && 'text-text-primary-brand-on-neutral-hover-bg bg-background-neutral-hover',
@@ -82,6 +82,14 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    level: {
+        type: Number as PropType<number>,
+        default: 1,
+    },
+    showNestedLevelGuide: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
     textClass: String as PropType<string>,
     iconClass: String as PropType<string>,
     disabled: {
@@ -101,6 +109,20 @@ defineEmits(['click'])
 const route = useRoute()
 
 // Computed classes
+const resolvedLevel = computed(() => {
+    return Math.min(Math.max(props.level, 1), 3)
+})
+
+const levelTextClass = computed(() => {
+    const variant = {
+        1: 'text-sm font-semibold',
+        2: 'text-sm font-medium',
+        3: 'text-xs font-medium',
+    }
+
+    return variant[resolvedLevel.value as 1 | 2 | 3]
+})
+
 const spacingClass = computed(() => {
     if (props.isCollapsed) {
         const collapsedVariant = {
@@ -111,11 +133,23 @@ const spacingClass = computed(() => {
         return collapsedVariant[props.styleType as SidebarNavMenuItemStyleType] || 'p-2'
     }
 
-    const variant = {
-        [SidebarNavMenuItemStyleType.SPACED]: 'min-h-[40px] py-2 pl-3 pr-2',
-        [SidebarNavMenuItemStyleType.COMPACT]: 'py-1 pl-2 pr-1',
+    const levelVariant = {
+        1: {
+            [SidebarNavMenuItemStyleType.SPACED]: 'min-h-[40px] py-2 pl-3 pr-2',
+            [SidebarNavMenuItemStyleType.COMPACT]: 'py-1 pl-2 pr-1',
+        },
+        2: {
+            [SidebarNavMenuItemStyleType.SPACED]: 'min-h-[36px] py-1.5 pl-3 pr-2',
+            [SidebarNavMenuItemStyleType.COMPACT]: 'py-1 pl-2 pr-1',
+        },
+        3: {
+            [SidebarNavMenuItemStyleType.SPACED]: 'min-h-[32px] py-1 pl-3 pr-2',
+            [SidebarNavMenuItemStyleType.COMPACT]: 'py-0.5 pl-2 pr-1',
+        },
     }
 
+    const variant = levelVariant[resolvedLevel.value as 1 | 2 | 3]
+
     return variant[props.styleType as SidebarNavMenuItemStyleType] || 'min-h-[40px] py-2 pl-3 pr-2'
 })
 

package/components/navigation/nav-sidebar/NavSidebarMenuItemsTree.vue

@@ -0,0 +1,202 @@
+<template>
+    <div :class="levelWrapperClass">
+        <div
+            v-if="showGuideLine"
+            :class="guideLineClass"
+        />
+
+        <template v-for="(item, index) in items" :key="getNodeKey(getNodePath(index))">
+            <NavSidebarMenuSectionTitle
+                v-if="item.isSectionTitle"
+                :text="item.text"
+                :icon="item.icon"
+                :styleType="itemsStyleType"
+                :isCollapsed
+                :level
+                :showNestedLevelGuide
+                :showCollapseDivider
+                :class="[
+                    level > 1 && 'mt-2',
+                ]"
+            />
+
+            <template v-else>
+                <NavSidebarMenuItem
+                    :text="item.text"
+                    :icon="item.icon"
+                    :to="item.to"
+                    :disabled="item.disabled"
+                    :prefetchOn
+                    :styleType="itemsStyleType"
+                    :textClass="getTextClass(level)"
+                    :iconClass="getIconClass(level)"
+                    :showDropdownArrow="canRenderChildren(item)"
+                    :isOpen="isNodeOpen(getNodePath(index))"
+                    :isCollapsed
+                    :level
+                    :showNestedLevelGuide
+                    :class="[
+                        getItemCustomClass(level),
+                    ]"
+                    @click="handleItemClick(item, getNodePath(index))"
+                />
+
+                <NavSidebarMenuItemsTree
+                    v-if="canRenderChildren(item) && isNodeOpen(getNodePath(index))"
+                    :items="item.children ?? []"
+                    :level="level + 1"
+                    :isCollapsed
+                    :openItems
+                    :itemsStyleType
+                    :itemsTextClass
+                    :itemsIconClass
+                    :subItemsCustomClass
+                    :subItemsTextClass
+                    :subItemsIconClass
+                    :thirdLevelItemsCustomClass
+                    :prefetchOn
+                    :showCollapseDivider
+                    :showNestedLevelGuide
+                    :pathPrefix="getNodePath(index)"
+                    @toggle="emit('toggle', $event)"
+                />
+            </template>
+        </template>
+    </div>
+</template>
+<script setup lang="ts">
+defineOptions({
+    name: 'NavSidebarMenuItemsTree',
+})
+
+const props = defineProps({
+    items: {
+        type: Array as PropType<SidebarMenuItem[]>,
+        default: () => [],
+    },
+    level: {
+        type: Number as PropType<number>,
+        default: 1,
+    },
+    isCollapsed: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    openItems: {
+        type: Object as PropType<Record<string, boolean>>,
+        default: () => ({}),
+    },
+    itemsStyleType: {
+        type: String as PropType<SidebarNavMenuItemStyleType>,
+        default: SidebarNavMenuItemStyleType.COMPACT,
+        validator: (value: SidebarNavMenuItemStyleType) => Object.values(SidebarNavMenuItemStyleType).includes(value),
+    },
+    itemsCustomClass: String as PropType<string>,
+    itemsTextClass: String as PropType<string>,
+    itemsIconClass: String as PropType<string>,
+    subItemsCustomClass: String as PropType<string>,
+    subItemsTextClass: String as PropType<string>,
+    subItemsIconClass: String as PropType<string>,
+    thirdLevelItemsCustomClass: String as PropType<string>,
+    prefetchOn: {
+        type: [String, Object] as PropType<PrefetchOnStrategy>,
+        default: PrefetchOn.VISIBILITY,
+    },
+    showCollapseDivider: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    showNestedLevelGuide: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    pathPrefix: {
+        type: Array as PropType<number[]>,
+        default: () => [],
+    },
+})
+
+const emit = defineEmits<{
+    (e: 'toggle', path: number[]): void
+}>()
+
+const MAX_NESTING_LEVEL = 3
+
+const getNodePath = (index: number) => {
+    return [...props.pathPrefix, index]
+}
+
+const getNodeKey = (path: number[]) => {
+    return path.join('-')
+}
+
+const hasChildren = (item: SidebarMenuItem) => {
+    return Array.isArray(item.children) && item.children.length > 0
+}
+
+const canRenderChildren = (item: SidebarMenuItem) => {
+    return !props.isCollapsed && !item.isSectionTitle && hasChildren(item) && props.level < MAX_NESTING_LEVEL
+}
+
+const isNodeOpen = (path: number[]) => {
+    return !!props.openItems[getNodeKey(path)]
+}
+
+const showGuideLine = computed(() => {
+    return !props.isCollapsed && props.showNestedLevelGuide && props.level > 1
+})
+
+const levelWrapperClass = computed(() => {
+    if (props.level <= 1) return ''
+
+    const variant = {
+        2: 'relative ml-4 pl-3',
+        3: 'relative ml-8 pl-3',
+    }
+
+    return variant[props.level as 2 | 3] || 'relative ml-4 pl-3'
+})
+
+const guideLineClass = computed(() => {
+    const variant = {
+        2: 'pointer-events-none absolute left-0 top-0 bottom-0 w-[2px] bg-border-neutral-subtle/70',
+        3: 'pointer-events-none absolute left-0 top-0 bottom-0 w-[2px] bg-border-neutral-subtle/50',
+    }
+
+    return variant[props.level as 2 | 3] || 'pointer-events-none absolute left-0 top-0 bottom-0 w-[2px] bg-border-neutral-subtle/70'
+})
+
+const getItemCustomClass = (level: number) => {
+    if (level === 1) {
+        return props.itemsCustomClass
+    }
+
+    if (level === 2) {
+        return props.subItemsCustomClass ?? '!font-medium'
+    }
+
+    return props.thirdLevelItemsCustomClass ?? props.subItemsCustomClass ?? '!font-medium'
+}
+
+const getTextClass = (level: number) => {
+    if (level === 1) {
+        return props.itemsTextClass
+    }
+
+    return props.subItemsTextClass
+}
+
+const getIconClass = (level: number) => {
+    if (level === 1) {
+        return props.itemsIconClass
+    }
+
+    return props.subItemsIconClass
+}
+
+const handleItemClick = (item: SidebarMenuItem, path: number[]) => {
+    if (!canRenderChildren(item)) return
+
+    emit('toggle', path)
+}
+</script>

package/components/navigation/nav-sidebar/NavSidebarMenuSectionTitle.vue

@@ -1,15 +1,14 @@
 <template>
     <div 
         v-if="!isCollapsed"
+        v-bind="attrs"
         :class="[
         'flex',
         'items-center',
-        'text-sm',
-        'font-semibold',
-        'text-text-neutral-subtle',
-        'border-b',
-        'border-border-neutral-subtle',
+        textClass,
+        borderClass,
         spacingClass,
+        expandedLevelOneBottomMarginClass,
     ]"
     >
         <Icon
@@ -22,9 +21,17 @@
             {{ text }}
         </span>
     </div>
-    <Divider v-if="isCollapsed && showCollapseDivider" />
+
+    <Divider
+        v-if="isCollapsed && showCollapseDivider"
+        v-bind="attrs"
+    />
 </template>
 <script setup lang="ts">
+defineOptions({
+    inheritAttrs: false,
+})
+
 // Props
 const props = defineProps({
     text: {
@@ -41,14 +48,63 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    level: {
+        type: Number as PropType<number>,
+        default: 1,
+    },
+    showNestedLevelGuide: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
     showCollapseDivider: {
         type: Boolean as PropType<boolean>,
         default: true,
     },
 })
 
+const attrs = useAttrs()
+
 // Computed classes
+const resolvedLevel = computed(() => {
+    return Math.min(Math.max(props.level, 1), 3)
+})
+
+const textClass = computed(() => {
+    const variant = {
+        1: 'text-sm font-semibold text-text-neutral-subtle',
+        2: 'text-sm font-bold text-text-neutral-subtle',
+        3: 'text-xs font-bold text-text-neutral-subtle',
+    }
+
+    return variant[resolvedLevel.value as 1 | 2 | 3]
+})
+
+const borderClass = computed(() => {
+    if (resolvedLevel.value === 1) {
+        return 'border-b border-border-neutral-subtle'
+    }
+
+    return ''
+})
+
 const spacingClass = computed(() => {
+    if (resolvedLevel.value > 1) {
+        const nestedVariant = {
+            2: {
+                [SidebarNavMenuItemStyleType.SPACED]: 'min-h-[32px] gap-2 py-2 pl-3 pr-2',
+                [SidebarNavMenuItemStyleType.COMPACT]: 'min-h-[28px] gap-2 py-1.5 pl-2 pr-2',
+            },
+            3: {
+                [SidebarNavMenuItemStyleType.SPACED]: 'min-h-[30px] gap-2 py-1.5 pl-3 pr-2',
+                [SidebarNavMenuItemStyleType.COMPACT]: 'min-h-[26px] gap-2 py-1 pl-2 pr-2',
+            },
+        }
+
+        const levelVariant = nestedVariant[resolvedLevel.value as 2 | 3]
+
+        return levelVariant[props.styleType as SidebarNavMenuItemStyleType] || 'min-h-[28px] gap-2 py-1.5 pl-3 pr-2'
+    }
+
     const variant = {
         [SidebarNavMenuItemStyleType.SPACED]: 'min-h-[40px] gap-3 pt-4 pb-2 px-3',
         [SidebarNavMenuItemStyleType.COMPACT]: 'gap-2 pt-3 pb-1 px-2',
@@ -63,4 +119,17 @@ const iconSizeClass = computed(() => {
     }
     return variant[props.styleType as SidebarNavMenuItemStyleType] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
 })
+
+const expandedLevelOneBottomMarginClass = computed(() => {
+    if (props.isCollapsed || resolvedLevel.value !== 1) {
+        return ''
+    }
+
+    const variant = {
+        [SidebarNavMenuItemStyleType.SPACED]: 'mb-2',
+        [SidebarNavMenuItemStyleType.COMPACT]: 'mb-1',
+    }
+
+    return variant[props.styleType as SidebarNavMenuItemStyleType] || 'mb-2'
+})
 </script>

package/models/types/dropdowns.ts

@@ -1,5 +1,6 @@
 export interface DropdownMenuItem {
     actionType?: DropdownActionType
+    sectionTitle?: boolean
     text?: string
     icon?: string
     size?: DropdownItemSize
@@ -14,4 +15,21 @@ export interface DropdownMenuItem {
     hasSeparator?: boolean
     disabled?: boolean
     callback?: () => void
+    children?: DropdownMenuItem[]
 }
+
+export interface CollapsedDropdownItem {
+    sectionTitle?: boolean
+    text: string
+    to?: string
+    icon?: string
+    type?: DropdownItemType
+    size?: DropdownItemSize
+    helpText?: string
+    isExternal?: boolean
+    disabled?: boolean
+    hasSeparator?: boolean
+    actionType: DropdownActionType
+    children?: CollapsedDropdownItem[]
+}
+

package/models/types/selects.ts

@@ -6,6 +6,7 @@ import type { IconPosition } from '../enums/icons'
 export interface SelectOption {
     id?: string | number
     value: string | number
+    sectionTitle?: boolean
     text?: string
     inputType?: AllowedInputType
     applicableTypes?: AllowedInputType[]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.10.2",
+    "version": "1.11.0",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",