Demystifying ExpandMenu Component from the Creator Kit.


Are you developing apps in Power Apps? Have you heard of Creator Kit? If yes, great. If you have not heard of it I highly recommend you check that out. I will put some video references at the end of this post.

This post will share my learning on the ExpandMenu canvas component from the Creator Kit.

The Creator Kit has canvas components and PCF Controls. Please note, the Power Apps Component Framework (PCF) Controls are the code component. You may run into DLP issues blocking set by your company admins to deploy code components. If you are a pro developer the source is located here for your study.

Please note that there is a new experimental feature used i.e. “Behavior formula for components“. You will need to turn on this new feature in your environment.

ExapandMenu Inner Working

Input, Output, and Behavior properties.

All components have input and output properties. The input properties are to pass to the component and the output is for getting values from the component. Additionally, there is now new behavior property, think of behavior properties as events being raised by the component.

Input Properties

The input properties are for passing the values to the ExpandMenu Component. Note: there is a DefaultExpandValue property, it has the “Raise OnReset” event flag as turned on. This means the Component’s OnReset method will run whenever this property is set, it will then set the variable “IsOpen” to its value.

NameData TypeDefault ValueRaise OnReset Flag
ItemsTableSee below #1None
ThemeRecordSee below #2None
DefaultExpandValueBooleanfalseSet(   IsOpen,   ExpandMenu.DefaultExpandValue)
Input Properties

Output Properties

The GetMenuIconPath acts like a method. The component internally uses to get an SVG Path text value for the Icon.

Note the IsExpanded is set to the IsOpen (component’s internal variable). Anytime the IsOpen component’s internal variable is changed the value will reflect using IsExpanded. Later you will see the screen using this component will make use of IsExpanded to control the width.

NameData TypeParameterValue
IsExpandedBoolean IsOpen
GetMenuIconPathTextIconName:TextSee # 3 below
By IconName
Find the SVG path
Output Properties

Behavior Properties

data type
OnExpandSelectBooleanWhen a user selects a Hamburger image.
OnButtonSelectBooleanWhen user selects
a menu item.
Behavior properties
WidthIf(!Self.IsExpanded, 46, 221)
The Width property controls the expanding the component horizontally.

Components UI Controls

The following are the UI controls. The imgExpanButton acts as a hamburger image. The gaExpandMenu is the vertical galley with the Items values bounded as the list of menu items.


When a user clicks on the Hamburger image, the OnSelect event fires. It sets the Component level variable “IsOpen”. The IsOpen variable is tied to the Component’s IsExpanded output property. Also, it makes a call to the “OnExpandSelect” behavior property.

Notice the image is an SVG Path with the Theme color value.

Image“data:image/svg+xml,” &  EncodeUrl(     “<svg xmlns=’; xmlns:xlink=’; version=’1.1′ viewBox=’-10 0 2068 2048′>   <g transform=’matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)’>    <path fill='” & ExpandMenu.Theme.palette.neutralPrimary & “‘ d=’M2048 1408h-2048v128h2048v-128v0zM2048 384h-2048v128h2048v-128v0zM2048 897h-2048v127h2048v-127v0z’ />   </g>   </svg>” )  
Toggle IsOpen Variable.
It is local to the component. Also, call the OnExpandSelect event.


If a screen is present and a navigation flag is not disabled
then navigate to the screen.
Also, raise the OnButtonSelect Event */

If(!IsBlank(ThisItem.Screen) &&

//Raise the OnButtonSelect event


X, Y5,10
Width, Height3,20


It first checks Icon Name is present in the table hash. If not found it uses whatever is passed.
If present then it builds the using SVG path with theme color values.

ImageIf(IsBlank(ExpandMenu.GetMenuIconPath(ThisItem.Icon)), ThisItem.Icon, “data:image/svg+xml,” &  EncodeUrl(     “<svg xmlns=’; xmlns:xlink=’; version=’1.1′ viewBox=’-10 0 ” & 2068 & ” 2048′>   <g
transform=’matrix(1 0 0 -1 0 2048),rotate(0, 2068,1024)’>    <path fill='” &
ExpandMenu.Theme.palette.neutralPrimary & “‘ d='” &
ExpandMenu.GetMenuIconPath(ThisItem.Icon) & “‘ />   </g> </svg>” ))


Note the left padding is applied to skip the icon on the left of the label.

Width, HeightParent.Width,40

Use Component on the screen

Add a screen and add the following.

    Width:If(Self.IsExpanded, 200, 46)   
        {Icon:”PowerApps”, Label: “Power Apps”, Screen:scrExpandMenu},         {Icon: “PowerBILogo”, Label: “Power BI”, Screen:scrAutoWidthLabel},         {Icon: “PowerAutomateLogo”, Label: “Power Automate”, Screen:scrBreadcrumb},         {Icon: “Dataverse”, Label:”Dataverse”, Screen:scrCommandBar}    )  
Screen using the component.


Earlier in the post, I added references to #1, #2, and #3. I kept it at the end to refer it back as it is a large code piece.

#1Table( { Icon: “PowerApps”, Label: “Power Apps”, Screen:App.ActiveScreen, Tooltip:”Power Apps Tooltip” } )
#2{ palette: { themePrimary: “#0078d4”, themeLighterAlt: “#eff6fc”, themeLighter: “#deecf9”, themeLight: “#c7e0f4”, themeTertiary: “#71afe5”, themeSecondary: “#2b88d8”, themeDarkAlt: “#106ebe”, themeDark: “#005a9e”, themeDarker: “#004578”, neutralLighterAlt: “#faf9f8”, neutralLighter: “#f3f2f1”, neutralLight: “#edebe9”, neutralQuaternaryAlt: “#e1dfdd”, neutralQuaternary: “#d0d0d0”, neutralTertiaryAlt: “#c8c6c4”, neutralTertiary: “#a19f9d”, neutralSecondary: “#605e5c”, neutralPrimaryAlt: “#3b3a39”, neutralPrimary: “#323130”, neutralDark: “#201f1e”, black: “#000000”, white: “#ffffff” } }
#3LookUp( Table(         {             Name: “SizeLegacy”,             Code: “E2B2”,             Path: “some code for SVG PATH”         },         {             Name: “PageLink”,             Code: “E302”,             Path: “some other code for SVG PATH”         }      ) , Name=IconName).Path


This post may help you when you look at the Expand Menu component code and try to use the same pattern for your own new control. Keep it as clean as possible like this control.

You can look at this video for the Creator Kit Overview.

Please let me know your feedback.

About Pankaj

I am a Developer and my linked profile is
This entry was posted in Technical Stuff. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s