This is doable with a canvas component and a SharePoint list. Here's the approach.
SharePoint list setup:
Create a list with columns: Title (label text), Icon (text, store icon name or image URL), ScreenName (text, the screen to navigate to), SortOrder (number).
Component setup:
Create a canvas component. Add a custom property called IsExpanded (boolean, input) to control the hamburger toggle. Add another custom property SelectedItem (text, output) to track the active item.
Gallery inside the component:
Set Items to: SortByColumns(YourSharePointList, "SortOrder", SortOrder.Ascending)
For each gallery item:
- Add an Image control, set Image to ThisItem.Icon (or use a hardcoded icon set mapped by name)
- Add a Label, set Text to ThisItem.Title, set Visible to the IsExpanded property
- Set the gallery item's Fill to: If(ThisItem.Title = varSelectedNav, RGBA(0,120,212,1), RGBA(0,0,0,0)) for highlight
Navigation on click:
On the gallery item's OnSelect:
Set(varSelectedNav, ThisItem.Title); Navigate(LookUp(colNavScreens, Title = ThisItem.Title).ScreenName)
Since Navigate() doesn't accept a text string directly as a screen reference, the cleanest pattern is to use a Switch statement:
Switch(ThisItem.ScreenName, "Home", Navigate(HomeScreen), "Finance", Navigate(FinanceScreen))
Hamburger button:
Add a button outside the gallery with OnSelect: Set(varExpanded, !varExpanded) and pass varExpanded into the IsExpanded component property.
One thing to confirm: are your icons stored as image URLs in SharePoint, SVG strings, or are you using the built-in Power Apps icon set? That determines how to set the Image property in the gallery.
Best regards,
Valantis
✅ If this helped solve your issue, please Accept as Solution so others can find it quickly.
❤️ If it didn’t fully solve it but was still useful, please click “Yes” on “Was this reply helpful?” or leave a Like :).
🏷️ For follow-ups @Valantis.
📝 https://valantisond365.com/
