After importing, the component may appear incomplete in the Studio editor until you press F5 (Preview) or publish. This is standard Power Apps behavior for YAML-imported components — the editor doesn't fully evaluate nested gallery templates until a preview cycle. End users always see the fully rendered component.

Preview

Click menu items to interact

Installation

This component requires Modern controls to be enabled. Settings → Updates → Preview → Modern controls and themes

# In Power Apps Studio:
1. Components tab → New component → Import from code
2. Paste the full YAML definition
3. Add the component to any screen
4. Press F5 (Preview) to see the fully rendered component

Usage

Define top-level menu items

// MenuItems — the top navigation bar buttons
// Each item needs: ID, Label, HasDropdown, Link

cmpNavigationMenu.MenuItems = Table(
    { ID: "dashboard",  Label: "Dashboard",  HasDropdown: false, Link: "DashboardScreen" },
    { ID: "inventory",  Label: "Inventory",  HasDropdown: true,  Link: "" },
    { ID: "operations", Label: "Operations", HasDropdown: true,  Link: "" },
    { ID: "reports",    Label: "Reports",    HasDropdown: true,  Link: "" }
)

Define dropdown content

// DropdownItems — content for each dropdown panel
// MenuID links items to their parent menu button
// Column: 1 = left, 2 = right (for 2-column layouts)
// Section: optional header text above each column group

cmpNavigationMenu.DropdownItems = Table(
    { MenuID: "inventory", Section: "Products", Icon: "Layout",
      Label: "All Items", Description: "Browse full catalog",
      Link: "ItemsScreen", Column: 1 },
    { MenuID: "inventory", Section: "Products", Icon: "BarChart",
      Label: "Stock Levels", Description: "Current quantities",
      Link: "StockScreen", Column: 1 },
    { MenuID: "inventory", Section: "Tracking", Icon: "Rocket",
      Label: "Incoming", Description: "Expected shipments",
      Link: "IncomingScreen", Column: 2 },
    { MenuID: "inventory", Section: "Tracking", Icon: "Zap",
      Label: "Adjustments", Description: "Manual corrections",
      Link: "AdjustScreen", Column: 2 }
)

Handle navigation

// OnItemSelect — fires when any item is clicked
// Use SelectedItem output to route navigation

cmpNavigationMenu.OnItemSelect = Switch(
    cmpNavigationMenu.SelectedItem.Link,
    "DashboardScreen", Navigate(scrDashboard),
    "ItemsScreen",     Navigate(scrItems),
    "StockScreen",     Navigate(scrStock),
    "IncomingScreen",  Navigate(scrIncoming)
)

// Or use a lookup table approach
cmpNavigationMenu.OnItemSelect = Navigate(
    LookUp(
        colScreenMap,
        Link = cmpNavigationMenu.SelectedItem.Link
    ).Screen
)

Properties

Input

Property	Type	Default
`MenuItems` Top-level nav buttons (ID, Label, HasDropdown, Link)	Table	See default
`DropdownItems` Dropdown content (MenuID, Section, Icon, Label, Description, Link, Column)	Table	See default
`DropdownColumns` Columns in dropdown panel (1 = list, 2 = mega menu)	Number	2
`NavAlign` Menu bar alignment: "Left", "Center", or "Right"	Text	"Center"
`ActiveColor` Accent color for active/selected states	Color	RGBA(37,99,235,1)
`Theme` "Light" or "Dark" theme	Text	"Light"
`ShowIcons` Show icons in dropdown items	Boolean	true
`ShowDescriptions` Show description text in dropdown items	Boolean	true
`ShowNavScrollbar` Show scrollbar on the nav bar gallery	Boolean	false
`ShowDropdownScrollbar` Show scrollbar in dropdown galleries	Boolean	false

Output

Property	Type	Description
`SelectedItem`	Record	The last clicked item record (from MenuItems or DropdownItems)
`SelectedMenuID`	Text	ID of the currently open or last selected parent menu
`IsOpen`	Boolean	Whether a dropdown panel is currently open

Event

Event	Description
`OnItemSelect`	Fires when any menu button or dropdown item is clicked. Use with SelectedItem to route navigation.

Implementation Details

Dual-table architecture

MenuItems defines the top bar buttons. DropdownItems holds all dropdown content, linked via MenuID. This separation lets you modify dropdown content independently and keeps formulas clean.

Three active states

Menu buttons highlight in three scenarios: when their dropdown is open, when clicked as a direct link (e.g. Dashboard), or when a child dropdown item was last selected and the dropdown is closed. All three use the ActiveColor property.

Adaptive column layout

When DropdownColumns is 2, the panel checks if Column 2 items exist for the active menu. If not, it renders a narrow single-column panel. On screens under 500px, all items collapse into a single scrollable column regardless of the setting.

Click-outside dismiss

A full-size transparent backdrop behind the dropdown catches outside clicks. For full-screen dismiss beyond the component bounds, add Set(_navOpenMenu, Blank()) to your Screen.OnSelect property.

Built-in icons

The Icon field supports 9 built-in names: Layout, FileText, BarChart, Settings, Code, Book, Rocket, Zap, Sparkles. You can also pass raw SVG strings or data:image/svg+xml URIs for custom icons.

Responsive behavior

On desktop (500px+), buttons size between 120–160px with 14px font. On mobile (<500px), buttons lock at 120px min with 12px font and the nav bar becomes horizontally swipeable. Two-column dropdowns collapse to a single column, and section headers hide to avoid confusion.

Examples

Single-column dropdown (Reports)

// Reports — no sections, single column
// Section: "" means no header shown

DropdownItems: Table(
    { MenuID: "reports", Section: "",
      Icon: "BarChart",
      Label: "Inventory Value",
      Description: "Cost summaries",
      Link: "ValueReportScreen",
      Column: 1 },
    { MenuID: "reports", Section: "",
      Icon: "Sparkles",
      Label: "Turnover Analysis",
      Description: "Sell-through rates",
      Link: "TurnoverScreen",
      Column: 1 },
    { MenuID: "reports", Section: "",
      Icon: "Book",
      Label: "Low Stock Alerts",
      Description: "Items below threshold",
      Link: "LowStockScreen",
      Column: 1 }
)

Two-column mega menu (Inventory)

// Inventory — 2 columns with sections
// Column 1 = "Products"
// Column 2 = "Tracking"

DropdownItems: Table(
    { MenuID: "inventory",
      Section: "Products",
      Icon: "Layout",
      Label: "All Items",
      Description: "Browse catalog",
      Link: "ItemsScreen",
      Column: 1 },
    { MenuID: "inventory",
      Section: "Tracking",
      Icon: "Rocket",
      Label: "Incoming",
      Description: "Expected shipments",
      Link: "IncomingScreen",
      Column: 2 }
    // ... more items
)

cmpNavigationMenu.DropdownColumns = 2

Data Schema

MenuItems record

Field	Type	Notes
ID	Text	Unique identifier, matches MenuID in DropdownItems
Label	Text	Button text displayed in the nav bar
HasDropdown	Boolean	true = has dropdown panel, false = direct link
Link	Text	Screen name or route for direct-link items

DropdownItems record

Field	Type	Notes
MenuID	Text	Links to parent MenuItem ID
Section	Text	Column header text (blank = no header)
Icon	Text	Built-in name, raw SVG string, or data URI
Label	Text	Item title
Description	Text	Subtitle (hidden when ShowDescriptions = false)
Link	Text	Screen name or route identifier
Column	Number	1 = left column, 2 = right column

Architecture

19 controls across 3 group containers, 3 galleries, and supporting labels/buttons.

14 properties — 10 input, 3 output, 1 event.

cmpNavigationMenu
├── cntNavRoot (GroupContainer — full width)
│   └── cntNavBar (GroupContainer — 48px bar, border-bottom)
│       └── galMenuItems (Horizontal Gallery)
│           ├── btnMenuItem (button per item)
│           └── imgChevron (▾ indicator)
├── btnBackdrop (transparent full-screen click catcher)
└── cntDropdownPanel (GroupContainer — positioned below active item)
    ├── lblCol1Section (section header above col 1)
    ├── lblCol2Section (section header above col 2)
    ├── galDDCol1 (Gallery — column 1 items)
    │   ├── imgIcon + lblLabel + lblDesc + btnHit
    └── galDDCol2 (Gallery — column 2 items)
        └── imgIcon + lblLabel + lblDesc + btnHit

Navigation Menu