web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Welcome to the Power Platform Communities
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / How to Create a 3-Leve...
Power Apps
Suggested Answer

How to Create a 3-Level Expandable Nested Gallery (Category → Subcategory → Dashboard)

(1) ShareShare
ReportReport
Posted on by WC-08072359-0 4

Hi everyone,

I'm trying to create a 3-level expandable menu structure in Power Apps similar to the image below, but I'm having difficulty implementing the 3rd level gallery under the 2nd level gallery.

Desired Structure

Level 1 (Category)When the user clicks a Category (e.g., BMI), it expands and displays the Level 2 items:

Level 2 (Subcategory)When the user clicks a Subcategory (e.g., Overall), I want it to further expand and display the Level 3 items:

  • Overall

  • Facilities

  • Others

Level 3 (Dashboards)

  • Dashboard 1

  • Dashboard 2

The behavior should be similar to the following hierarchy:

BMI (Category)
 ├─ Overall (SubCategory)
 │   ├─ Dashboard 1
 │   ├─ Dashboard 2
 │   ├─ Dashboard 3
 │   └─ Dashboard 4
 │
 ├─ Facilities
 │   ├─ Dashboard 5
 │   └─ Dashboard 6
 │
 └─ Others
     ├─ Dashboard 7
     └─ Dashboard 8

MP (Category)
 ├─ Overall (SubCategory)
 └─ Facilities
 

Current Status

✅ Successfully implemented:

  • Gallery 1 = Categories

  • Gallery 2 = Subcategories (appears when Category is clicked)

❌ Current issue:

  • Unable to create a 3rd expandable gallery under Gallery 2.

  • When a Subcategory is clicked, I want only the related dashboards to expand underneath that specific Subcategory.

  • I'm not sure how to properly structure the nested galleries and manage the expand/collapse variables for the third level.

Questions

  1. Is it possible to have Gallery 3 nested inside Gallery 2 inside Gallery 1?

  2. What is the recommended approach for a 3-level expandable menu in Power Apps?

  3. Should I use nested galleries, flexible height galleries, or a collection-based approach instead?

  4. Does anyone have a sample formula or example for handling the expand/collapse logic for multiple levels?

I've attached a mockup of the desired outcome for reference.

Any advice would be greatly appreciated. Thank you!

Gallery Overview.png
Categories:
Building Power Apps
I have the same question (0)
  • Suggested answer
    MS.Ragavendar Profile Picture
    MS.Ragavendar 7,468 Super User 2026 Season 1 on at
     
    Yes you have successfully landed in the Power Apps limitation.
     
    It is not possible to create Gallery 3 inside Gallery 2 inside Gallery 1 (3 levels of nested galleries).
     
    Power Apps supports:
    • Gallery → Gallery ✅ (2 Level Nested Gallery is possible)
    • Gallery → Gallery → Gallery ❌ (3 Level Nested Gallery is not possible)
    You can implement something like this - https://www.enjoysharepoint.com/powerapps-nested-gallery/
     
    ✅If this helped, please Accept as Solution to help others ❤️ A Like is appreciated 🏷️ Tag @MS.Ragavendar for follow-ups.
     

     

  • Suggested answer
    WiranataLim13 Profile Picture
    WiranataLim13 2 on at
     
    I was able to do it without any nested gallery to maximize performance. However, the data would need to be flattened into one collection.
     
    Here's the sample collection:
    ClearCollect(
    col_Flatten, 
    {
        Type: "Category",
        Label: "BMI",
        Key: "BMI", 
        ParentKey: "", 
        Expanded: false, 
        Visible: true
    },
    {
        Type: "Subcategory",
        Key: "BMI|Overall", 
        Label: "Overall",
        ParentKey: "BMI", 
        Expanded: false, 
        Visible: false
    }, 
    {
        Type: "Dashboard",
        Label: "Dashboard 1", 
        ParentKey: "BMI|Overall", 
        Visible: false
    }, 
    {
        Type: "Dashboard",
        Label: "Dashboard 2", 
        ParentKey: "BMI|Overall", 
        Visible: false
    }, 
    {
        Type: "Dashboard",
        Label: "Dashboard 3", 
        ParentKey: "BMI|Overall", 
        Visible: false
    }, 
    {
        Type: "Dashboard",
        Label: "Dashboard 4", 
        ParentKey: "BMI|Overall", 
        Visible: false
    }, 
    {
        Type: "Subcategory",
        Key: "BMI|Facilities",
        Label: "Facilities", 
        ParentKey: "BMI", 
        Expanded: false, 
        Visible: false
    }, 
    {
        Type: "Dashboard",
        Label: "Dashboard 5", 
        ParentKey: "BMI|Facilities", 
        Visible: false
    }, 
    {
        Type: "Dashboard",
        Label: "Dashboard 6", 
        ParentKey: "BMI|Facilities", 
        Visible: false
    }, 
    {
        Type: "Subcategory",
        Key: "BMI|Others",
        Label: "Others", 
        ParentKey: "BMI", 
        Expanded: false, 
        Visible: false
    }, 
    {
        Type: "Dashboard",
        Label: "Dashboard 7", 
        ParentKey: "BMI|Others", 
        Visible: false
    }, 
    {
        Type: "Dashboard",
        Label: "Dashboard 8", 
        ParentKey: "BMI|Others", 
        Visible: false
    }
)
    Then the gallery structure and how it looks like:
         
     
    Set the Items of the gallery: Filter(col_Flatten,Visible = true)
     
    Set the Visible for each template container to its respective type
    con_Dashboard Visible: ThisItem.Type = "Dashboard"
    con_Subcategory Visible: ThisItem.Type = "Subcategory"
    con_Category Visible: ThisItem.Type = "Category"
     
    Set the Text for each text label to its respective label: ThisItem.Label
     
    Set the OnSelect for Category (btn_Category) to control expand/collapse function:
    //--------------------------
//COLLAPSE THE CATEGORY (L1)
//--------------------------
UpdateIf(col_Flatten, Key = ThisItem.Key, { Expanded: !Expanded });

//--------------------------
//FOR ALL EXPANDED SUBCATEGORIES (L2), HIDE THE DASHBOARDS (L3)
//--------------------------
ForAll(
    Filter(
        col_Flatten, 
        ParentKey = ThisItem.Key, 
        Expanded = true
    ) As Child, 
    UpdateIf( 
        col_Flatten, 
        ParentKey = Child.Key, 
        {
            Visible: !Visible
        }
    )
);

//--------------------------
//HIDE THE SUBCATEGORIES (L3)
//IF COLLAPSING THE L1 ALSO COLLAPSING THE L2,
//UPDATE THE EXPANDED FIELD AS WELL
//--------------------------
UpdateIf(
    col_Flatten,
    ParentKey = ThisItem.Key,
    {
        Visible: !Visible
        //Expanded: !Expanded
    }
);
    And finally, set the OnSelect for Subcategory (btn_Subcategory): 
    //--------------------------
//COLLAPSE THE SUBCATEGORY (L2)
//--------------------------
UpdateIf(col_Flatten, Key = ThisItem.Key, { Expanded: !Expanded });

//--------------------------
//HIDE THE DASHBOARDS (L3)
//--------------------------
UpdateIf(
    col_Flatten,
    ParentKey = ThisItem.Key,
    { Visible: !Visible }
);
    Apologies if it's too long😅
    Hope you're able to give it a try!

    Cheers!
  • Suggested answer
    WarrenBelz Profile Picture
    WarrenBelz 156,003 Most Valuable Professional on at
    If you are referring to nested galleries, then @MS.Ragavendar is correct - there is a hard limit of two. If you want some sort of expanding menu with individual galleries, then this blog of mine may be of some use to you.
     
    Please ✅ Does this answer your question if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider answering Yes to Was this reply helpful? or give it a Like ♥
    Visit my blog     Practical Power Apps    LinkedIn  
  • BL-13070933-0 Profile Picture
    BL-13070933-0 2 on at
    Hi @WiranataLim13,

    We are using data from SharePoint, so how do I flatten the data into collection?
    We will also be managing user access through SharePoint Lists, so we need to ensure that the flattened collection is linked to the SharePoint List data. This will allow us to control and enforce user access permissions for the Dashboards within the Power App based on the access settings maintained in SharePoint, each dashboard will be having around 30 - 50 users.

    I have followed all the steps you provided, but my UI now looks like this:
    instead of the one shown in your example below:


    Could you please help me identify what I might have missed or configured incorrectly?

    The below is the full coding:
     

    OnStart of the App:
    Clear(col_Flatten);
     
    Collect(
        col_Flatten,
        // Category
        ForAll(
            Distinct('Published Dashboards Copy', Category),
            {
                Type: "Category",
                Label: Value,
                Key: Value,
                ParentKey: "",
                Expanded: false,
                Visible: true
            }
        )
    );
     
    Collect(
        col_Flatten,
        // Subcategory
        ForAll(
            Distinct(
                'Published Dashboards Copy',
                Category & "|" & SubCategory
            ),
            {
                Type: "Subcategory",
                Label: Last(Split(Value,"|")).Value,
                Key: Value,
                ParentKey: First(Split(Value,"|")).Value,
                Expanded: false,
                Visible: false
            }
        )
    );
     
    Collect(
        col_Flatten,
        // Dashboard
        ForAll(
            'Published Dashboards Copy',
            {
                Type: "Dashboard",
                Label: Title,
                ParentKey: Category & "|" & SubCategory,
                Visible: false
            }
        )
    );
     
    Items of Gallery: Filter(col_Flatten, Visible=true)
     
    Visible of 3 container:
    ThisItem.Type = "Category"
    ThisItem.Type = "Subcategory"
    ThisItem.Type = "Dashboard"
    OnSelect of category button:
    UpdateIf(col_Flatten, Key = ThisItem.Key, { Expanded: !Expanded });
    ForAll(
        Filter(
            col_Flatten, 
            ParentKey = ThisItem.Key, 
            Expanded = true
        ) As Child, 
        UpdateIf( 
            col_Flatten, 
            ParentKey = Child.Key, 
            {
                Visible: !Visible
            }
        )
    );
    //--------------------------
    //HIDE THE SUBCATEGORIES (L3)
    //IF COLLAPSING THE L1 ALSO COLLAPSING THE L2,
    //UPDATE THE EXPANDED FIELD AS WELL
    //--------------------------
    UpdateIf(
        col_Flatten,
        ParentKey = ThisItem.Key,
        {
            Visible: !Visible
            //Expanded: !Expanded
        }
    );
     
    OnSelect of SubCategory button:
    //--------------------------
    //COLLAPSE THE SUBCATEGORY (L2)
    //--------------------------
    UpdateIf(col_Flatten, Key = ThisItem.Key, { Expanded: !Expanded });
    //--------------------------
    //HIDE THE DASHBOARDS (L3)
    //--------------------------
    UpdateIf(
        col_Flatten,
        ParentKey = ThisItem.Key,
        { Visible: !Visible }
    );
     
    Text of each text label:
    ThisItem.Label

    Thank you.

  • WC-08072359-0 Profile Picture
    WC-08072359-0 4 on at

    Gallery Alignment Issue: Dashboard Gallery Does Not Align with Selected Subcategory

    Hi everyone,

    I am building a hierarchical navigation menu in Power Apps using galleries. 

    When a user clicks a subcategory, the corresponding dashboards are displayed in a gallery on the right side.

    My issue is that the dashboard list always appears at a fixed position on the right and does not align with the selected subcategory.

    For example:


    • When I click Subcategory 1, the dashboard list appears correctly.

    • When I click Subcategory 2, the dashboard list still appears at the same position (at the top) instead of moving down and aligning with Subcategory 2.

    • I would like the dashboard list to be displayed beside the selected subcategory so users can easily identify which dashboards belong to which subcategory.

    Desired Result

    Category 1
 ├─ Subcategory 1  → Dashboard List appears beside Subcategory 1
 ├─ Subcategory 2  → Dashboard List appears beside Subcategory 2

Category 2
 ├─ Subcategory 3  → Dashboard List appears beside Subcategory 3
 ├─ Subcategory 4  → Dashboard List appears beside Subcategory 4

    I have attached a screenshot illustrating the issue.

    Has anyone implemented a similar expandable menu structure before?

    • Is there a way to dynamically position the dashboard gallery based on the selected subcategory?

    • Should I use a nested gallery, flexible height gallery, component, or another approach?

    • Any sample formulas or design recommendations would be greatly appreciated.

    Thank you!

     

     

     

    Alignment.png
  • WarrenBelz Profile Picture
    WarrenBelz 156,003 Most Valuable Professional on at
     
     
    You need a collection for each gallery and then include a sequential number for each record - the code for this is also in the blog.
     
    You will see the Y formulas in the blog I referenced - you can also download the working app here. I have updated the blog and you also need to note that the TemplatePadding needs to be zero 0.
     
    Essentially you need a dynamic Y setting based on the Y of the previous gallery (to start at the top) plus the RowNo  (that is why it is included) minus 1 multiplied by the TemplateHeight of the previous gallery. So it lines up with the top (actually the bottom of the record before) of the previously selected record.
     
    As an example, your first Collection 
    With(
   {
      _Data:
      ForAll(
         Distinct(
            'Published Dashboards Copy', 
            Category
         ),
         {
            Type: "Category",
            Label: Value,
            Key: Value,
            ParentKey: "",
            Expanded: false,
            Visible: true
         }
      )
   },
   ClearCollect(
      colCategory,
      ForAll(
         Sequence(
            CountRows(_Data)
         ),
         Patch( 
            Index( 
               _Data, 
               Value
            ), 
            {RowNo: Value} 
         )
      )
   )
);
    Whether you use this model or something else, you need a sequenial number field in every gallery that requires the next one to align with the selected item.
     
    Please ✅ Does this answer your question if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider answering Yes to Was this reply helpful? or give it a Like ♥
    Visit my blog     Practical Power Apps    LinkedIn  
     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities

Quick Links

Season of Sharing Community Challenge Winners!

Congratulations to our community stars!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 324 Most Valuable Professional

#2
11manish Profile Picture

11manish 193

#3
Valantis Profile Picture

Valantis 138

Last 30 days Overall leaderboard

Featured topics

Auto-Populate field Power Pages
Gallery Tabs - Show or Hide Tabs based on Field Value
How to patch multiple records at once
Enable Copilot for end users in model-driven apps
Question for everyone : How are you using Create Text GPT in AI Builder?
Community content - sample components, blogs etc. - Link to this page (http://aka.ms/PCFdemos)
Welcome to the Power Apps forum!

Product updates

Microsoft Power Platform Community release plans