Sidebar

Mobile navigation sidebar

Platform
Projects

Nested Menus Demo

Nested Menu Items

This demo showcases the nested menu feature using SidebarMenuSub, SidebarMenuSubItem, and SidebarMenuSubButton.

Nested Menu Components

  • SidebarMenuSub: Container for sub-menu items with connecting border
  • SidebarMenuSubItem: Individual sub-menu item wrapper
  • SidebarMenuSubButton: Clickable sub-menu item with smaller styling

Dialog

Edit profile

Make changes to your profile here. Click save when you're done.

This button is outside the Dialog component but opens the same dialog:

Nested Dialog Demo

Parent Dialog

This is the parent dialog. You can open a nested dialog from here.

Nested Dialog (Level 1)

This is the first nested dialog. You can open another nested dialog.

Nested Dialog (Level 2)

This is the second level nested dialog.

Usage

<SidebarMenuItem>
  <SidebarMenuButton>
    <Icon />
    <span>Parent Item</span>
    <ChevronRight class="ml-auto" />
  </SidebarMenuButton>
  <SidebarMenuSub>
    <SidebarMenuSubItem>
      <SidebarMenuSubButton href="#">
        Sub Item 1
      </SidebarMenuSubButton>
    </SidebarMenuSubItem>
    <SidebarMenuSubItem>
      <SidebarMenuSubButton href="#">
        Sub Item 2
      </SidebarMenuSubButton>
    </SidebarMenuSubItem>
  </SidebarMenuSub>
</SidebarMenuItem>

Navigation

Basic Sidebar Demo ← Back to Components