Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Breadcrumb

MyCondy

Last edited 11 minutes ago by MyCondy

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

2x Container

3x Image

2x Label

Procedure

Step 1 - create main container

Add a new Horizontal Container PCF, call it "breadcrumb_frame" with this "Gap" property:

Step 2 - create home icon container

Add a new Horizontal Container PCF, call it "icon_frame" with this "Gap" property:

Add a new Image object, call it "home_icon" with this "Image" property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='22' height='24' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M9.39996 1.09241C9.88009 0.687753 10.4878 0.46582 11.1157 0.46582C11.7436 0.46582 12.3513 0.687753 12.8315 1.09241L20.8186 7.82764C21.4185 8.33409 21.7652 9.07837 21.7652 9.86288V21.4626C21.7652 22.0118 21.5471 22.5385 21.1587 22.9268C20.7704 23.3152 20.2437 23.5333 19.6945 23.5333H15.553C15.0038 23.5333 14.4771 23.3152 14.0888 22.9268C13.7004 22.5385 13.4823 22.0118 13.4823 21.4626V14.9545C13.4823 14.8761 13.4511 14.8008 13.3956 14.7454C13.3402 14.6899 13.2649 14.6587 13.1865 14.6587H9.04497C8.96652 14.6587 8.89127 14.6899 8.8358 14.7454C8.78032 14.8008 8.74915 14.8761 8.74915 14.9545V21.4626C8.74915 22.0118 8.53099 22.5385 8.14265 22.9268C7.75431 23.3152 7.2276 23.5333 6.67841 23.5333H2.53693C2.26499 23.5333 1.99572 23.4798 1.74449 23.3757C1.49326 23.2716 1.26498 23.1191 1.07269 22.9268C0.880407 22.7345 0.727877 22.5063 0.623812 22.255C0.519748 22.0038 0.466187 21.7345 0.466187 21.4626V9.86288C0.466187 9.07837 0.812888 8.33409 1.41281 7.82764L9.39996 1.09241ZM11.6872 2.44963C11.5273 2.31495 11.3248 2.2411 11.1157 2.2411C10.9066 2.2411 10.7042 2.31495 10.5442 2.44963L2.55704 9.18368C2.4582 9.26689 2.37872 9.37067 2.32415 9.48778C2.26958 9.60489 2.24124 9.7325 2.24111 9.8617V21.4614C2.24111 21.6247 2.37364 21.7572 2.53693 21.7572H6.67841C6.75687 21.7572 6.83211 21.7261 6.88759 21.6706C6.94306 21.6151 6.97423 21.5399 6.97423 21.4614V14.9534C6.97423 13.8091 7.90192 12.8826 9.04497 12.8826H13.1865C14.3295 12.8826 15.2572 13.8091 15.2572 14.9534V21.4614C15.2572 21.6247 15.3897 21.7572 15.553 21.7572H19.6945C19.773 21.7572 19.8482 21.7261 19.9037 21.6706C19.9592 21.6151 19.9903 21.5399 19.9903 21.4614V9.86288C19.9902 9.73369 19.9618 9.60607 19.9073 9.48896C19.8527 9.37185 19.7732 9.26807 19.6744 9.18486L11.6872 2.44963Z' fill='#3F4D61'/> <path d='M11.6872 2.44963C11.5273 2.31495 11.3248 2.2411 11.1157 2.2411C10.9066 2.2411 10.7042 2.31495 10.5442 2.44963L2.55704 9.18368C2.4582 9.26689 2.37872 9.37067 2.32415 9.48778C2.26958 9.60489 2.24124 9.7325 2.24111 9.8617V21.4614C2.24111 21.6247 2.37364 21.7572 2.53693 21.7572H6.67841C6.75687 21.7572 6.83211 21.7261 6.88759 21.6706C6.94306 21.6151 6.97423 21.5399 6.97423 21.4614V14.9534C6.97423 13.8091 7.90192 12.8826 9.04497 12.8826H13.1865C14.3295 12.8826 15.2572 13.8091 15.2572 14.9534V21.4614C15.2572 21.6247 15.3897 21.7572 15.553 21.7572H19.6945C19.773 21.7572 19.8482 21.7261 19.9037 21.6706C19.9592 21.6151 19.9903 21.5399 19.9903 21.4614V9.86288C19.9902 9.73369 19.9618 9.60607 19.9073 9.48896C19.8527 9.37185 19.7732 9.26807 19.6744 9.18486L11.6872 2.44963Z' fill='#3F4D61'/> </svg>")

Step 3 - create first level icon

Add a new Image object, call it "first_level_icon" with this "Image" property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M7.27266 3.86346C7.16186 3.97439 7.09963 4.12476 7.09963 4.28155C7.09963 4.43833 7.16186 4.58871 7.27266 4.69964L12.5738 10.0007L7.27266 15.3018C7.21453 15.356 7.16791 15.4213 7.13557 15.4939C7.10323 15.5665 7.08584 15.6448 7.08444 15.7243C7.08304 15.8037 7.09765 15.8826 7.12741 15.9563C7.15717 16.0299 7.20146 16.0969 7.25764 16.153C7.31382 16.2092 7.38074 16.2535 7.45441 16.2833C7.52808 16.313 7.60699 16.3276 7.68643 16.3262C7.76587 16.3248 7.84421 16.3074 7.91679 16.2751C7.98936 16.2428 8.05468 16.1962 8.10884 16.138L13.828 10.4188C13.9388 10.3079 14.0011 10.1575 14.0011 10.0007C14.0011 9.84395 13.9388 9.69358 13.828 9.58265L8.10884 3.86346C7.99791 3.75266 7.84753 3.69043 7.69075 3.69043C7.53396 3.69043 7.38359 3.75266 7.27266 3.86346Z' fill='#A4ABBD'/> </svg>")

Step 4 - create screen name value

Add a new Label object, call it "screen_name" with Text property:

<Your_screen_name>.Name

Step 5 - create second level icon

Add a new Image object, call it "second_level_icon" with this "Image" property:

Step 6 - create screen title value

Add a new Label object, call it "screen_value" with Text property:

"DesignKit"

you can use dynamic value, like selected gallery item, or record in your table.

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

5x Frame

2x Text

3x Vector

Procedure

Step 1 - create a parent frame with auto layout

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_breadcrumb_frame" with these properties:

⁠

⁠

Step 2 - create a icon frame with auto layout

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_icon_frame" with these properties:

⁠

⁠

Import a new SVG file under a "horcont_icon_frame" frame, call it "svg_home_icon" with this XML code:

Step 3 - create a first level icon

Import a new SVG file, call it "svg_first_level_icon" with this XML code:

Step 4 - create a first level text

Add a new Text (T command) object, call it "lbl_screen_name" with these properties:

⁠

⁠

Step 5 - create a second level icon

Import a new SVG file, call it "svg_first_level_icon" with this XML code:

Step 6 - create a second level text

Add a new Text (T command) object, call it "lbl_screen_value" with these properties:

⁠

⁠

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

horcont_breadcrumb_frame, horcont_icon_frame = Horizontal Container

svg_home_icon, svg_first_level_icon, svg_second_level_icon = Image

lbl_screen_name, lbl_screen_value = Label

YAML Output

⁠

Used Colours

Home Icon Background - #E6E6E6

Home Icon Colour - #3F4D61

Active Text Colour - #3F4D61

Inactive Text Colour - #A3A9B4

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.