UIForge
Home / Components / Dark Sidebar

Dark Sidebar Navigation

Features dynamic menu items with custom icons, active state highlighting, section titles, and a sleek dark theme.

✓ Ready ★ Popular Canvas Component v1.0.0

POWERAPPS PREVIEW SANDBOX

Selected Screen: Projects

In your Power Apps app, the Sidebar component is fully responsive. Clicking any button fires the OnMenuSelect event with SelectedMenuID.

EVENT EMITTER OnMenuSelect()
Active ID Binding 1

💡 Clicking items on the sidebar preview instantly updates the active selection and regenerates the corresponding YAML code below!

Add Menu Item

Copying YAML

1 First Copy & Paste Component YAML in to PowerApps component tab 1 Then Copy & Paste Screens YAML in to PowerApps screens tab

Copy-Pasteable Component Blueprint YAML 

          

        


        
        

          

            

              
              
                Copy-Pasteable Screens Blueprint YAML
              
            

            
            

              
              

                
                
              


              
            

          


          
          

          

            

          

        

      


      
      

        

          
          

            
How to Use in Power Apps

            
Official Integration Guide

          

        

        
        

          
          

            

              

                1
                Dynamic Navigation with OnMenuSelect
              

              Formula Generator
            

            

              When an item is clicked in the sidebar, the component fires its OnMenuSelect event, storing the chosen page ID in Self.SelectedMenuID. Assign the OnMenuSelect property of your sidebar to the following formula to handle navigation dynamically:
            

            
            
            

              
              
            

          


          
          

            

              2
              Synchronizing Selected Pages Across Screens
            

            

              To keep the selection indicator perfectly aligned as you navigate between screens, bind the component's DefaultSelected property on each screen to a global variable (e.g., _cmpNavSelID) or hardcode it to match that screen's menu item ID (like 1, 2, etc.).