Skip to content

Power Apps UI Cooker

Custom Functions

Custom Components

More

Share

Explore

Custom Components

Menu

Last edited 28 days ago by MyCondy

The menu is fully responsible for your screen width.

How to design it in Power Apps

Preview

⁠

Screenshot 2024-08-02 at 10.31.19.png

⁠

⁠

This is the final preview of the custom component called "Menu"

What does it consist of?

1x Group

2x HTML TEXT

4x Image

Procedure

Step 1 - create HTML menu box

Add a new HTML TEXT object, call it "menu_box" with this "HTML text" property:

"<div style='margin:0px;width:"&Self.Width&"px;height:90px;background-color:#4F4E4E; border-radius:10px;'></div>"

Step 2 - create images with SVG icons

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

"data:image/svg+xml;utf8, "&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='#fff' class='bi bi-columns-gap' viewBox='0 0 20 20'>

<path d='M16.803,18.615h-4.535c-1,0-1.814-0.812-1.814-1.812v-4.535c0-1.002,0.814-1.814,1.814-1.814h4.535c1.001,0,1.813,0.812,1.813,1.814v4.535C18.616,17.803,17.804,18.615,16.803,18.615zM17.71,12.268c0-0.502-0.405-0.906-0.907-0.906h-4.535c-0.501,0-0.906,0.404-0.906,0.906v4.535c0,0.502,0.405,0.906,0.906,0.906h4.535c0.502,0,0.907-0.404,0.907-0.906V12.268z M16.803,9.546h-4.535c-1,0-1.814-0.812-1.814-1.814V3.198c0-1.002,0.814-1.814,1.814-1.814h4.535c1.001,0,1.813,0.812,1.813,1.814v4.534C18.616,8.734,17.804,9.546,16.803,9.546zM17.71,3.198c0-0.501-0.405-0.907-0.907-0.907h-4.535c-0.501,0-0.906,0.406-0.906,0.907v4.534c0,0.501,0.405,0.908,0.906,0.908h4.535c0.502,0,0.907-0.406,0.907-0.908V3.198z M7.733,18.615H3.198c-1.002,0-1.814-0.812-1.814-1.812v-4.535c0-1.002,0.812-1.814,1.814-1.814h4.535c1.002,0,1.814,0.812,1.814,1.814v4.535C9.547,17.803,8.735,18.615,7.733,18.615zM8.64,12.268c0-0.502-0.406-0.906-0.907-0.906H3.198c-0.501,0-0.907,0.404-0.907,0.906v4.535c0,0.502,0.406,0.906,0.907,0.906h4.535c0.501,0,0.907-0.404,0.907-0.906V12.268z M7.733,9.546H3.198c-1.002,0-1.814-0.812-1.814-1.814V3.198c0-1.002,0.812-1.814,1.814-1.814h4.535c1.002,0,1.814,0.812,1.814,1.814v4.534C9.547,8.734,8.735,9.546,7.733,9.546z M8.64,3.198c0-0.501-0.406-0.907-0.907-0.907H3.198c-0.501,0-0.907,0.406-0.907,0.907v4.534c0,0.501,0.406,0.908,0.907,0.908h4.535c0.501,0,0.907-0.406,0.907-0.908V3.198z'></path>

</svg>")

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

"data:image/svg+xml;utf8, "&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='#fff' class='bi bi-columns-gap' viewBox='0 0 20 20'>

<path d='M17.927,5.828h-4.41l-1.929-1.961c-0.078-0.079-0.186-0.125-0.297-0.125H4.159c-0.229,0-0.417,0.188-0.417,0.417v1.669H2.073c-0.229,0-0.417,0.188-0.417,0.417v9.596c0,0.229,0.188,0.417,0.417,0.417h15.854c0.229,0,0.417-0.188,0.417-0.417V6.245C18.344,6.016,18.156,5.828,17.927,5.828 M4.577,4.577h6.539l1.231,1.251h-7.77V4.577z M17.51,15.424H2.491V6.663H17.51V15.424z'></path>

</svg>")

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

"data:image/svg+xml;utf8, "&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='#fff' class='bi bi-columns-gap' viewBox='0 0 20 20'>

<path d='M6.634,13.591H2.146c-0.247,0-0.449,0.201-0.449,0.448v2.692c0,0.247,0.202,0.449,0.449,0.449h4.488c0.247,0,0.449-0.202,0.449-0.449v-2.692C7.083,13.792,6.881,13.591,6.634,13.591 M6.185,16.283h-3.59v-1.795h3.59V16.283zM6.634,8.205H2.146c-0.247,0-0.449,0.202-0.449,0.449v2.692c0,0.247,0.202,0.449,0.449,0.449h4.488c0.247,0,0.449-0.202,0.449-0.449V8.653C7.083,8.407,6.881,8.205,6.634,8.205 M6.185,10.897h-3.59V9.103h3.59V10.897z M6.634,2.819H2.146c-0.247,0-0.449,0.202-0.449,0.449V5.96c0,0.247,0.202,0.449,0.449,0.449h4.488c0.247,0,0.449-0.202,0.449-0.449V3.268C7.083,3.021,6.881,2.819,6.634,2.819 M6.185,5.512h-3.59V3.717h3.59V5.512z M15.933,5.683c-0.175-0.168-0.361-0.33-0.555-0.479l1.677-1.613c0.297-0.281,0.088-0.772-0.31-0.772H9.336c-0.249,0-0.448,0.202-0.448,0.449v7.107c0,0.395,0.471,0.598,0.758,0.326l1.797-1.728c0.054,0.045,0.107,0.094,0.161,0.146c0.802,0.767,1.243,1.786,1.243,2.867c0,1.071-0.435,2.078-1.227,2.837c-0.7,0.671-1.354,1.086-2.345,1.169c-0.482,0.041-0.577,0.733-0.092,0.875c0.687,0.209,1.12,0.314,1.839,0.314c0.932,0,1.838-0.173,2.673-0.505c0.835-0.33,1.603-0.819,2.262-1.449c1.322-1.266,2.346-2.953,2.346-4.751C18.303,8.665,17.272,6.964,15.933,5.683 M15.336,14.578c-1.124,1.077-2.619,1.681-4.217,1.705c0.408-0.221,0.788-0.491,1.122-0.812c0.97-0.929,1.504-2.168,1.504-3.485c0-1.328-0.539-2.578-1.521-3.516c-0.178-0.17-0.357-0.321-0.548-0.456c-0.125-0.089-0.379-0.146-0.569,0.041L9.769,9.327v-5.61h5.861l-1.264,1.216c-0.099,0.094-0.148,0.229-0.137,0.366c0.014,0.134,0.088,0.258,0.202,0.332c0.313,0.204,0.61,0.44,0.882,0.7c1.158,1.111,2.092,2.581,2.092,4.145C17.405,12.026,16.48,13.482,15.336,14.578'></path>

</svg>")

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

"data:image/svg+xml;utf8, "&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='#fff' class='bi bi-columns-gap' viewBox='0 0 20 20'>

<path d='M14.68,12.621c-0.9,0-1.702,0.43-2.216,1.09l-4.549-2.637c0.284-0.691,0.284-1.457,0-2.146l4.549-2.638c0.514,0.661,1.315,1.09,2.216,1.09c1.549,0,2.809-1.26,2.809-2.808c0-1.548-1.26-2.809-2.809-2.809c-1.548,0-2.808,1.26-2.808,2.809c0,0.38,0.076,0.741,0.214,1.073l-4.55,2.638c-0.515-0.661-1.316-1.09-2.217-1.09c-1.548,0-2.808,1.26-2.808,2.809s1.26,2.808,2.808,2.808c0.9,0,1.702-0.43,2.217-1.09l4.55,2.637c-0.138,0.332-0.214,0.693-0.214,1.074c0,1.549,1.26,2.809,2.808,2.809c1.549,0,2.809-1.26,2.809-2.809S16.229,12.621,14.68,12.621M14.68,2.512c1.136,0,2.06,0.923,2.06,2.06S15.815,6.63,14.68,6.63s-2.059-0.923-2.059-2.059S13.544,2.512,14.68,2.512M5.319,12.061c-1.136,0-2.06-0.924-2.06-2.06s0.923-2.059,2.06-2.059c1.135,0,2.06,0.923,2.06,2.059S6.454,12.061,5.319,12.061M14.68,17.488c-1.136,0-2.059-0.922-2.059-2.059s0.923-2.061,2.059-2.061s2.06,0.924,2.06,2.061S15.815,17.488,14.68,17.488'></path>

</svg>")

Step3 - create HTML selection box

Add a new HTML TEXT object, call it "selection_box" with this "HTML text" property:

"<div style='margin:0px;width:"&Self.Width&"px;height:15px;background-color:#FF735C; border-radius:10px;'></div>"

Step 4 - group all objects

Now, we select all objects and group them via shortcut - COMMAND + G (MAC) , CONTROL + G (WIN).

This is an output:

⁠

Screenshot 2024-08-02 at 10.59.00.png

⁠

⁠

How to design it in Figma

Preview

⁠

Screenshot 2024-08-12 at 15.57.09.png

⁠

⁠

What does it consist of?

5x Frame

2x Rectangle

4x Vector

Procedure

Step 1 - create a frame with boxes

Add a new Frame (F command) object, call it "cont_menu_box" with these properties:

⁠

Screenshot 2024-08-12 at 16.02.31.png

⁠

⁠

Add a new Rectangle (R command) object under a "cont_menu_box" frame, call it "html_box" with these properties:

⁠

Screenshot 2024-08-12 at 16.17.40.png

⁠

⁠

Add a new Rectangle (R command) object under a "cont_menu_box" frame, call it "html_selection_menu_box" with these properties:

⁠

Screenshot 2024-08-12 at 16.20.26.png

⁠

⁠

Step 2 - create icons

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

<svg width="43" height="38" viewBox="0 0 43 38" fill="none" xmlns="http://www.w3.org/2000/svg">

<path d="M38.1673 37.953H27.0566C24.6066 37.953 22.6123 36.1666 22.6123 33.9666V23.9896C22.6123 21.7852 24.6066 19.9988 27.0566 19.9988H38.1673C40.6198 19.9988 42.6092 21.7852 42.6092 23.9896V33.9666C42.6092 36.1666 40.6198 37.953 38.1673 37.953ZM40.3895 23.9896C40.3895 22.8852 39.3972 21.9964 38.1673 21.9964H27.0566C25.8291 21.9964 24.8369 22.8852 24.8369 23.9896V33.9666C24.8369 35.071 25.8291 35.9598 27.0566 35.9598H38.1673C39.3972 35.9598 40.3895 35.071 40.3895 33.9666V23.9896ZM38.1673 18.0012H27.0566C24.6066 18.0012 22.6123 16.2148 22.6123 14.0104V4.0356C22.6123 1.8312 24.6066 0.0447998 27.0566 0.0447998H38.1673C40.6198 0.0447998 42.6092 1.8312 42.6092 4.0356V14.0104C42.6092 16.2148 40.6198 18.0012 38.1673 18.0012ZM40.3895 4.0356C40.3895 2.9334 39.3972 2.0402 38.1673 2.0402H27.0566C25.8291 2.0402 24.8369 2.9334 24.8369 4.0356V14.0104C24.8369 15.1126 25.8291 16.008 27.0566 16.008H38.1673C39.3972 16.008 40.3895 15.1148 40.3895 14.0104V4.0356ZM15.9458 37.953H4.83509C2.38019 37.953 0.390793 36.1666 0.390793 33.9666V23.9896C0.390793 21.7852 2.38019 19.9988 4.83509 19.9988H15.9458C18.4007 19.9988 20.3901 21.7852 20.3901 23.9896V33.9666C20.3901 36.1666 18.4007 37.953 15.9458 37.953ZM18.168 23.9896C18.168 22.8852 17.1733 21.9964 15.9458 21.9964H4.83509C3.60764 21.9964 2.61294 22.8852 2.61294 23.9896V33.9666C2.61294 35.071 3.60764 35.9598 4.83509 35.9598H15.9458C17.1733 35.9598 18.168 35.071 18.168 33.9666V23.9896ZM15.9458 18.0012H4.83509C2.38019 18.0012 0.390793 16.2148 0.390793 14.0104V4.0356C0.390793 1.8312 2.38019 0.0447998 4.83509 0.0447998H15.9458C18.4007 0.0447998 20.3901 1.8312 20.3901 4.0356V14.0104C20.3901 16.2148 18.4007 18.0012 15.9458 18.0012ZM18.168 4.0356C18.168 2.9334 17.1733 2.0402 15.9458 2.0402H4.83509C3.60764 2.0402 2.61294 2.9334 2.61294 4.0356V14.0104C2.61294 15.1126 3.60764 16.008 4.83509 16.008H15.9458C17.1733 16.008 18.168 15.1148 18.168 14.0104V4.0356Z" fill="white"/>

</svg>

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

<svg width="41" height="28" viewBox="0 0 41 28" fill="none" xmlns="http://www.w3.org/2000/svg">

<path d="M39.9211 4.82159H29.1166L24.3906 0.507391C24.1995 0.333591 23.9349 0.232391 23.6629 0.232391H6.18955C5.6285 0.232391 5.1679 0.645991 5.1679 1.14979V4.82159H1.07885C0.517797 4.82159 0.0571976 5.23519 0.0571976 5.73899V26.8502C0.0571976 27.354 0.517797 27.7676 1.07885 27.7676H39.9211C40.4822 27.7676 40.9428 27.354 40.9428 26.8502V5.73899C40.9428 5.23519 40.4822 4.82159 39.9211 4.82159ZM7.21365 2.06939H23.2342L26.2501 4.82159H7.21365V2.06939ZM38.8995 25.9328H2.10295V6.65859H38.8995V25.9328Z" fill="white"/>

</svg>

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

<svg width="41" height="32" viewBox="0 0 41 32" fill="none" xmlns="http://www.w3.org/2000/svg">

<path d="M12.2533 23.9002H1.2577C0.652546 23.9002 0.157646 24.3424 0.157646 24.8858V30.8082C0.157646 31.3516 0.652546 31.796 1.2577 31.796H12.2533C12.8584 31.796 13.3533 31.3516 13.3533 30.8082V24.8858C13.3533 24.3424 12.8584 23.9002 12.2533 23.9002ZM11.1532 29.8226H2.35775V25.8736H11.1532V29.8226ZM12.2533 12.051H1.2577C0.652546 12.051 0.157646 12.4954 0.157646 13.0388V18.9612C0.157646 19.5046 0.652546 19.949 1.2577 19.949H12.2533C12.8584 19.949 13.3533 19.5046 13.3533 18.9612V13.0366C13.3533 12.4954 12.8584 12.051 12.2533 12.051ZM11.1532 17.9734H2.35775V14.0266H11.1532V17.9734ZM12.2533 0.201813H1.2577C0.652546 0.201813 0.157646 0.646213 0.157646 1.18961V7.11201C0.157646 7.65541 0.652546 8.09981 1.2577 8.09981H12.2533C12.8584 8.09981 13.3533 7.65541 13.3533 7.11201V1.18961C13.3533 0.646213 12.8584 0.201813 12.2533 0.201813ZM11.1532 6.12641H2.35775V2.17741H11.1532V6.12641ZM35.0358 6.50261C34.6071 6.13301 34.1514 5.77661 33.6761 5.44881L37.7847 1.90021C38.5124 1.28201 38.0003 0.201813 37.0252 0.201813H18.8732C18.2631 0.201813 17.7756 0.646213 17.7756 1.18961V16.825C17.7756 17.694 18.9295 18.1406 19.6327 17.5422L24.0353 13.7406C24.1676 13.8396 24.2975 13.9474 24.4298 14.0618C26.3947 15.7492 27.4751 17.991 27.4751 20.3692C27.4751 22.7254 26.4094 24.9408 24.469 26.6106C22.754 28.0868 21.1517 28.9998 18.7237 29.1824C17.5428 29.2726 17.3101 30.795 18.4983 31.1074C20.1815 31.5672 21.2423 31.7982 23.0039 31.7982C25.2873 31.7982 27.507 31.4176 29.5527 30.6872C31.5985 29.9612 33.4801 28.8854 35.0946 27.4994C38.3335 24.7142 40.8423 21.0028 40.8423 17.0472C40.8423 13.063 38.3164 9.32081 35.0358 6.50261ZM33.5732 26.0716C30.8194 28.441 27.1566 29.7698 23.2415 29.8226C24.2411 29.3364 25.1721 28.7424 25.9904 28.0362C28.3669 25.9924 29.6752 23.2666 29.6752 20.3692C29.6752 17.4476 28.3547 14.6976 25.9488 12.634C25.5127 12.26 25.0741 11.9278 24.6062 11.6308C24.2999 11.435 23.6776 11.3096 23.2121 11.721L19.934 14.5194V2.17741H34.2935L31.1967 4.85261C30.9541 5.05941 30.8341 5.35641 30.861 5.65781C30.8953 5.95261 31.0766 6.22541 31.3559 6.38821C32.1228 6.83701 32.8504 7.35621 33.5168 7.92821C36.3539 10.3724 38.6422 13.6064 38.6422 17.0472C38.6422 20.4572 36.376 23.6604 33.5732 26.0716Z" fill="white"/>

</svg>

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

<svg width="37" height="38" viewBox="0 0 37 38" fill="none" xmlns="http://www.w3.org/2000/svg">

<path d="M29.966 24.7662C27.761 24.7662 25.7961 25.7122 24.5368 27.1642L13.3917 21.3628C14.0875 19.8426 14.0875 18.1574 13.3917 16.6416L24.5368 10.838C25.7961 12.2922 27.7586 13.236 29.966 13.236C33.7611 13.236 36.8481 10.464 36.8481 7.0584C36.8481 3.6528 33.7611 0.878601 29.966 0.878601C26.1734 0.878601 23.0864 3.6506 23.0864 7.0584C23.0864 7.8944 23.2726 8.6886 23.6107 9.419L12.4632 15.2226C11.2014 13.7684 9.239 12.8246 7.03155 12.8246C3.23895 12.8246 0.151947 15.5966 0.151947 19.0044C0.151947 22.4122 3.23895 25.182 7.03155 25.182C9.23655 25.182 11.2014 24.236 12.4632 22.784L23.6107 28.5854C23.2726 29.3158 23.0864 30.11 23.0864 30.9482C23.0864 34.356 26.1734 37.128 29.966 37.128C33.7611 37.128 36.8481 34.356 36.8481 30.9482C36.8481 27.5404 33.7611 24.7662 29.966 24.7662ZM29.966 2.5264C32.7492 2.5264 35.013 4.557 35.013 7.0584C35.013 9.5598 32.7468 11.586 29.966 11.586C27.1853 11.586 24.9215 9.5554 24.9215 7.0562C24.9215 4.557 27.1828 2.5264 29.966 2.5264ZM7.03155 23.5342C4.24835 23.5342 1.98455 21.5014 1.98455 19.0022C1.98455 16.503 4.2459 14.4724 7.03155 14.4724C9.8123 14.4724 12.0785 16.503 12.0785 19.0022C12.0785 21.5014 9.8123 23.5342 7.03155 23.5342ZM29.966 35.4736C27.1828 35.4736 24.9215 33.4452 24.9215 30.9438C24.9215 28.4424 27.1828 26.4096 29.966 26.4096C32.7492 26.4096 35.013 28.4424 35.013 30.9438C35.013 33.4452 32.7468 35.4736 29.966 35.4736Z" fill="white"/>

</svg>

This is an output:

⁠

Screenshot 2024-08-12 at 15.50.38.png

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

cont_menu_box = Manual Container

html_selection_menu_box, html_box = HTML TEXT

svg_share_icon, svg_history_icon, svg_files_icon, svg_dashboard_icon = Image

YAML Output

⁠

⁠

⁠

Used Colours

Menu box - #4F4E4E

Selection Box -#FF735C

Icons - #FFFFFF

⁠

← Loading Popup⁠

⁠

⁠

Message Dialog →⁠

⁠

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.