Power Apps: Expand & Collapse Left Navigation Component

Standard navigation in Power Apps often requires repetitive work across screens, which is hard to maintain. I wanted to build a solution for my team that was functional but also visually aligned with our brand. My goal was to create a reusable left navigation component that simplifies development while providing a positive user experience.

To keep the app "light," I used Named Formulas at the app level, under Formulas. This allows me to define the navigation table once—storing screen names, labels, and icons—and reference it globally without taxing App.OnStart.

I used custom SVG rather than relying on the standard icon set, I integrated custom SVGs. This gives the navigation a modern look and allows for unique branding.

To allow for dynamic theming: I built a custom color palette into the component. By changing a few global variables, the entire navigation updates instantly, ensuring UI consistency across every screen.

The User Experience

The "expand/collapse" feature is the heart of the design.

Expanded View: Provides clear text labels for ease of use.

Currently, this is a core tool for my team. My next step is to finalize a Component Library version with clear documentation. This will allow other makers to import the component and simply "plug and play" their own SVG code and color hex values.