Implementing Navigation Menu Bar Using SVG via Figma Part 1

Background:

We had a requirement in our ongoing project in which we have to create a navigation menu bar and our client is very precautious about the design so we already had a design of the menu bar in Figma but to implement the same design in canvas app required a bit out of the box designing because we cannot use the built-in icon/controls so what we did was to get the SVG code of the part we are building through Figma and used it to implement the UI. For reference here is the picture of the navigation menu we needed to create:

We tried making it using icons like rectangles and triangles but we can rotate shapes in the canvas app and it was a bit more complicated so following are the step you need to follow:

Solution:

1. We need to create a collection of items we are going to display in our menu bar. write the following code on App onStart property.

ClearCollect( NavMenuGal,


{
? ? PageTitle:"Project Details",
? ? ID:1,
? ? ScreenName:CreateEPDProject1
},
{
? ? PageTitle:"Project Overview",
? ? ID:2,
? ? ScreenName:CreateEPDProject2
},
{
? ? PageTitle:"Project Feasibility",
? ? ID:3,
? ? ScreenName:CreateEPDProject3
},
{
? ? PageTitle:"Risks Identification & Evaluation",
? ? ID:4,
? ? ScreenName:CreateEPDProject4
},
{
? ? PageTitle:"Control and Challenges",
? ? ID:5,
? ? ScreenName:CreateEPDProject5
}
);        

2. We will add a blank horizontal gallery on a blank screen.

3. We will set the following properties in the gallery: width, height, template size/padding, color to transparent, and set the Datasource to the collection we just created.

4. After this we will add an image control in the gallery. We will set the width and height of image to Parent.TemplateWidth and Parent.TemplateHeight, x and y to zero, fill to transparent, and position to fit.

5. Add a Button and set the fill to transparent. In short we need to make it invisible with the select property enabled so for that we cannot set the mode of button disabled or view so we will change all the coloring to transparent and borders to zero, Set the width and height same as image. Set the onSelect property of button to this:

Set(currentID,ThisItem.ID);Set(currentName,ThisItem.PageTitle);        

6. Add a label to display the titles of menu bar. Set the properties width, height same as image. To differentiate between the selected , already visited and non visited we will add the following code to the color property of label.

If(currentID=ThisItem.ID,	ColorValue("#3D4EAC") , If(currentID>ThisItem.ID,ColorValue("#FFFFFF"),ColorValue("#3C4257")))        

Gallery Should be looking like this for now

7. Now we are moving to the most trickiest part of this blog how we'll get the SVG code and set it as per our requirements.

8. First we will go to Figma and select the part for which we need the SVG Code for. For example we selected one component like this from the right side menu or from the display. I prefer to select it from the menu because you can select it very precisely from there.

9. Then we will right click on it and select "copy/paste as" and then copy as SVG.

10. We will paste this code in Notepad. We will replace " (double quotes) with ' (single quote) by pressing Ctrl+H (find and replace property of notepad).

11. We will concat ' data:image/svg+xml;utf8, "&EncodeUrl( ' this in the beginning of the SVG code and ' ") ' at the end of the code. The code should look like below:

"data:image/svg+xml;utf8, "&EncodeUrl(


<svg width='269' height='63' viewBox='0 0 269 63' fill='none' xmlns='https://www.w3.org/2000/svg'>
<g filter='url(#filter0_d_3283_412)'>
<mask id='path-1-inside-1_3283_412' fill='white'>
<path fill-rule='evenodd' clip-rule='evenodd' d='M251.782 3.69867C251.078 2.42307 249.736 1.63098 248.28 1.63098H6.41636C3.37161 1.63098 1.4432 4.89738 2.91405 7.5633L14.5749 28.6987C15.2385 29.9014 15.2385 31.3605 14.5749 32.5633L2.91405 53.6987C1.4432 56.3646 3.37161 59.631 6.41636 59.631H248.28C249.736 59.631 251.078 58.8389 251.782 57.5633L265.575 32.5633C266.239 31.3605 266.239 29.9014 265.575 28.6987L251.782 3.69867Z'/>
</mask>
<path fill-rule='evenodd' clip-rule='evenodd' d='M251.782 3.69867C251.078 2.42307 249.736 1.63098 248.28 1.63098H6.41636C3.37161 1.63098 1.4432 4.89738 2.91405 7.5633L14.5749 28.6987C15.2385 29.9014 15.2385 31.3605 14.5749 32.5633L2.91405 53.6987C1.4432 56.3646 3.37161 59.631 6.41636 59.631H248.28C249.736 59.631 251.078 58.8389 251.782 57.5633L265.575 32.5633C266.239 31.3605 266.239 29.9014 265.575 28.6987L251.782 3.69867Z' fill='#F5FBFF'/>
<path d='M14.5749 28.6987L15.4505 28.2156L14.5749 28.6987ZM14.5749 32.5633L15.4505 33.0464L14.5749 32.5633ZM265.575 32.5633L266.451 33.0464V33.0464L265.575 32.5633ZM265.575 28.6987L266.451 28.2156V28.2156L265.575 28.6987ZM2.91405 53.6987L2.03847 53.2156L2.91405 53.6987ZM251.782 3.69867L250.906 4.18175L251.782 3.69867ZM251.782 57.5633L252.657 58.0464L251.782 57.5633ZM2.91405 7.5633L2.03847 8.04637L2.91405 7.5633ZM6.41636 2.63098H248.28V0.630981H6.41636V2.63098ZM15.4505 28.2156L3.78963 7.08022L2.03847 8.04637L13.6994 29.1817L15.4505 28.2156ZM15.4505 33.0464C16.28 31.5429 16.28 29.719 15.4505 28.2156L13.6994 29.1817C14.1971 30.0838 14.1971 31.1782 13.6994 32.0802L15.4505 33.0464ZM3.78963 54.1818L15.4505 33.0464L13.6994 32.0802L2.03847 53.2156L3.78963 54.1818ZM248.28 58.631H6.41636V60.631H248.28V58.631ZM264.699 32.0802L250.906 57.0802L252.657 58.0464L266.451 33.0464L264.699 32.0802ZM264.699 29.1817C265.197 30.0838 265.197 31.1782 264.699 32.0802L266.451 33.0464C267.28 31.5429 267.28 29.719 266.451 28.2156L264.699 29.1817ZM250.906 4.18175L264.699 29.1817L266.451 28.2156L252.657 3.21559L250.906 4.18175ZM2.03847 53.2156C0.199908 56.548 2.61043 60.631 6.41636 60.631V58.631C4.1328 58.631 2.68649 56.1812 3.78963 54.1818L2.03847 53.2156ZM248.28 2.63098C249.372 2.63098 250.378 3.22505 250.906 4.18175L252.657 3.21559C251.778 1.62109 250.101 0.630981 248.28 0.630981V2.63098ZM248.28 60.631C250.101 60.631 251.778 59.6409 252.657 58.0464L250.906 57.0802C250.378 58.0369 249.372 58.631 248.28 58.631V60.631ZM6.41636 0.630981C2.61042 0.630981 0.199913 4.71398 2.03847 8.04637L3.78963 7.08022C2.68649 5.08078 4.1328 2.63098 6.41636 2.63098V0.630981Z' fill='#7DABF8' mask='url(#path-1-inside-1_3283_412)'/>
</g>
<defs>
<filter id='filter0_d_3283_412' x='0.410645' y='0.630981' width='267.662' height='62' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'>
<feFlood flood-opacity='0' result='BackgroundImageFix'/>
<feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/>
<feOffset dy='1'/>
<feGaussianBlur stdDeviation='1'/>
<feColorMatrix type='matrix' values='0 0 0 0 0.215686 0 0 0 0 0.254902 0 0 0 0 0.317647 0 0 0 0.08 0'/>
<feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_3283_412'/>
<feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_3283_412' result='shape'/>
</filter>
</defs>
</svg>


")        

12. If you look at the menu bar design you can see that for the first and last item we have flat beginning /end. So we will select first and last item one by one and repeat step 7,8 and 9.

For First Item

"data:image/svg+xml;utf8, "&EncodeUrl(

<svg width='272' height='63' viewBox='0 0 272 63' fill='none' xmlns='https://www.w3.org/2000/svg'
<g filter='url(#filter0_d_3283_1343)'>
<mask id='path-1-inside-1_3283_1343' fill='white'>
<path fill-rule='evenodd' clip-rule='evenodd' d='M2.28052 5.09619C2.28052 2.88705 4.07138 1.09619 6.28052 1.09619H251.919C253.376 1.09619 254.718 1.88828 255.421 3.16388L269.214 28.1639C269.878 29.3666 269.878 30.8258 269.214 32.0285L255.421 57.0285C254.718 58.3041 253.376 59.0962 251.919 59.0962H6.28052C4.07138 59.0962 2.28052 57.3053 2.28052 55.0962V5.09619Z'/>
</mask>
<path fill-rule='evenodd' clip-rule='evenodd' d='M2.28052 5.09619C2.28052 2.88705 4.07138 1.09619 6.28052 1.09619H251.919C253.376 1.09619 254.718 1.88828 255.421 3.16388L269.214 28.1639C269.878 29.3666 269.878 30.8258 269.214 32.0285L255.421 57.0285C254.718 58.3041 253.376 59.0962 251.919 59.0962H6.28052C4.07138 59.0962 2.28052 57.3053 2.28052 55.0962V5.09619Z' fill='#F5FBFF'/>
<path d='M269.214 28.1639L270.09 27.6808V27.6808L269.214 28.1639ZM269.214 32.0285L270.09 32.5116V32.5116L269.214 32.0285ZM255.421 57.0285L256.297 57.5116L255.421 57.0285ZM255.421 3.16388L254.546 3.64696L255.421 3.16388ZM251.919 0.0961914H6.28052V2.09619H251.919V0.0961914ZM254.546 3.64696L268.339 28.647L270.09 27.6808L256.297 2.6808L254.546 3.64696ZM268.339 28.647C268.837 29.549 268.837 30.6434 268.339 31.5454L270.09 32.5116C270.919 31.0081 270.919 29.1842 270.09 27.6808L268.339 28.647ZM268.339 31.5454L254.546 56.5454L256.297 57.5116L270.09 32.5116L268.339 31.5454ZM6.28052 60.0962H251.919V58.0962H6.28052V60.0962ZM1.28052 5.09619V55.0962H3.28052V5.09619H1.28052ZM254.546 56.5454C254.018 57.5021 253.012 58.0962 251.919 58.0962V60.0962C253.74 60.0962 255.417 59.1061 256.297 57.5116L254.546 56.5454ZM6.28052 0.0961914C3.51909 0.0961914 1.28052 2.33477 1.28052 5.09619H3.28052C3.28052 3.43934 4.62366 2.09619 6.28052 2.09619V0.0961914ZM6.28052 58.0962C4.62366 58.0962 3.28052 56.753 3.28052 55.0962H1.28052C1.28052 57.8576 3.51909 60.0962 6.28052 60.0962V58.0962ZM251.919 2.09619C253.012 2.09619 254.018 2.69026 254.546 3.64696L256.297 2.6808C255.417 1.0863 253.74 0.0961914 251.919 0.0961914V2.09619Z' fill='#7DABF8' mask='url(#path-1-inside-1_3283_1343)'/>
</g>
<defs>
<filter id='filter0_d_3283_1343' x='0.280518' y='0.0961914' width='271.431' height='62' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'>
<feFlood flood-opacity='0' result='BackgroundImageFix'/>
<feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/>
<feOffset dy='1'/>
<feGaussianBlur stdDeviation='1'/>
<feColorMatrix type='matrix' values='0 0 0 0 0.215686 0 0 0 0 0.254902 0 0 0 0 0.317647 0 0 0 0.08 0'/>
<feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_3283_1343'/>
<feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_3283_1343' result='shape'/>
</filter>
</defs>
</svg>>

")
        

For last Item

"data:image/svg+xml;utf8, "&EncodeUrl(

<svg width='254' height='63' viewBox='0 0 254 63' fill='none' xmlns='https://www.w3.org/2000/svg'>
<g filter='url(#filter0_d_3283_2237)'>
<mask id='path-1-inside-1_3283_2237' fill='white'>
<path fill-rule='evenodd' clip-rule='evenodd' d='M3.07568 7.5633C1.60483 4.89738 3.53323 1.63098 6.57798 1.63098H247.803C250.012 1.63098 251.803 3.42184 251.803 5.63098V55.631C251.803 57.8401 250.012 59.631 247.803 59.631H6.57799C3.53324 59.631 1.60482 56.3646 3.07567 53.6987L14.7366 32.5633C15.4002 31.3605 15.4002 29.9014 14.7366 28.6987L3.07568 7.5633Z'/>
</mask>
<path fill-rule='evenodd' clip-rule='evenodd' d='M3.07568 7.5633C1.60483 4.89738 3.53323 1.63098 6.57798 1.63098H247.803C250.012 1.63098 251.803 3.42184 251.803 5.63098V55.631C251.803 57.8401 250.012 59.631 247.803 59.631H6.57799C3.53324 59.631 1.60482 56.3646 3.07567 53.6987L14.7366 32.5633C15.4002 31.3605 15.4002 29.9014 14.7366 28.6987L3.07568 7.5633Z' fill='#F5FBFF'/>
<path d='M14.7366 32.5633L15.6122 33.0464L14.7366 32.5633ZM14.7366 28.6987L15.6122 28.2156L14.7366 28.6987ZM247.803 0.630981H6.57799V2.63098H247.803V0.630981ZM252.803 55.631V5.63098H250.803V55.631H252.803ZM6.57798 60.631H247.803V58.631H6.57798V60.631ZM13.861 32.0802L2.20009 53.2156L3.95125 54.1818L15.6122 33.0464L13.861 32.0802ZM13.861 29.1817C14.3587 30.0838 14.3587 31.1782 13.861 32.0802L15.6122 33.0464C16.4416 31.5429 16.4416 29.719 15.6122 28.2156L13.861 29.1817ZM2.2001 8.04637L13.861 29.1817L15.6122 28.2156L3.95125 7.08021L2.2001 8.04637ZM6.57798 58.631C4.29442 58.631 2.84811 56.1812 3.95125 54.1818L2.20009 53.2156C0.361528 56.548 2.77205 60.631 6.57798 60.631V58.631ZM250.803 55.631C250.803 57.2878 249.46 58.631 247.803 58.631V60.631C250.564 60.631 252.803 58.3924 252.803 55.631H250.803ZM6.57799 0.630981C2.77205 0.630981 0.361532 4.71397 2.2001 8.04637L3.95125 7.08021C2.84811 5.08078 4.29442 2.63098 6.57799 2.63098V0.630981ZM247.803 2.63098C249.46 2.63098 250.803 3.97413 250.803 5.63098H252.803C252.803 2.86956 250.564 0.630981 247.803 0.630981V2.63098Z' fill='#7DABF8' mask='url(#path-1-inside-1_3283_2237)'/>
</g>
<defs>
<filter id='filter0_d_3283_2237' x='0.572266' y='0.630981' width='253.23' height='62' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'>
<feFlood flood-opacity='0' result='BackgroundImageFix'/>
<feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/>
<feOffset dy='1'/>
<feGaussianBlur stdDeviation='1'/>
<feColorMatrix type='matrix' values='0 0 0 0 0.215686 0 0 0 0 0.254902 0 0 0 0 0.317647 0 0 0 0.08 0'/>
<feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_3283_2237'/>
<feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_3283_2237' result='shape'/>
</filter>
</defs>
</svg>

")
        

13. Now we will combine these formula into one so we can put it on the image. We can see that almost all the code is same for the three scenarios discussed above excluding the <mask> and 2 path tags after that. So we will keep the above and below codes same and apply conditions on these three only. Following code stays the same

"data:image/svg+xml;utf8, "&EncodeUrl(
<svg width='269' height='63' viewBox='0 0 269 63' fill='none' xmlns='https://www.w3.org/2000/svg'>
<g filter='url(#filter0_d_3283_287)'>"



</g>
<defs>
<filter id='filter0_d_3283_2237' x='0.572266' y='0.630981' width='253.23' height='62' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'>
<feFlood flood-opacity='0' result='BackgroundImageFix'/>
<feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/>
<feOffset dy='1'/>
<feGaussianBlur stdDeviation='1'/>
<feColorMatrix type='matrix' values='0 0 0 0 0.215686 0 0 0 0 0.254902 0 0 0 0 0.317647 0 0 0 0.08 0'/>
<feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_3283_2237'/>
<feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_3283_2237' result='shape'/>
</filter>
</defs>
</svg>

")

        

18. The conditional code will go between the <g> </g> tag.

To check if the item is first item we will check if the item's ID is equal to 1 then paste the code there. To write code between the SVG code lines "& &" we will use this method. For example if we need to write a condition we will close the string of SVG by adding " and the add & and write our condition and at the end of condition we will put & again and then put " to continue the SVG. Your code should look like this.

" & If(ThisItem.ID=1
"
<mask id='path-1-inside-1_3283_1343' fill='#E6F5FF'>
<path fill-rule='evenodd' clip-rule='evenodd' d='M2.28052 5.09619C2.28052 2.88705 4.07138 1.09619 6.28052 1.09619H251.919C253.376 1.09619 254.718 1.88828 255.421 3.16388L269.214 28.1639C269.878 29.3666 269.878 30.8258 269.214 32.0285L255.421 57.0285C254.718 58.3041 253.376 59.0962 251.919 59.0962H6.28052C4.07138 59.0962 2.28052 57.3053 2.28052 55.0962V5.09619Z'/>
</mask>

<path fill-rule='evenodd' clip-rule='evenodd' d='M2.28052 5.09619C2.28052 2.88705 4.07138 1.09619 6.28052 1.09619H251.919C253.376 1.09619 254.718 1.88828 255.421 3.16388L269.214 28.1639C269.878 29.3666 269.878 30.8258 269.214 32.0285L255.421 57.0285C254.718 58.3041 253.376 59.0962 251.919 59.0962H6.28052C4.07138 59.0962 2.28052 57.3053 2.28052 55.0962V5.09619Z' fill='#E6F5FF'/>

<path d='M269.214 28.1639L270.09 27.6808V27.6808L269.214 28.1639ZM269.214 32.0285L270.09 32.5116V32.5116L269.214 32.0285ZM255.421 57.0285L256.297 57.5116L255.421 57.0285ZM255.421 3.16388L254.546 3.64696L255.421 3.16388ZM251.919 0.0961914H6.28052V2.09619H251.919V0.0961914ZM254.546 3.64696L268.339 28.647L270.09 27.6808L256.297 2.6808L254.546 3.64696ZM268.339 28.647C268.837 29.549 268.837 30.6434 268.339 31.5454L270.09 32.5116C270.919 31.0081 270.919 29.1842 270.09 27.6808L268.339 28.647ZM268.339 31.5454L254.546 56.5454L256.297 57.5116L270.09 32.5116L268.339 31.5454ZM6.28052 60.0962H251.919V58.0962H6.28052V60.0962ZM1.28052 5.09619V55.0962H3.28052V5.09619H1.28052ZM254.546 56.5454C254.018 57.5021 253.012 58.0962 251.919 58.0962V60.0962C253.74 60.0962 255.417 59.1061 256.297 57.5116L254.546 56.5454ZM6.28052 0.0961914C3.51909 0.0961914 1.28052 2.33477 1.28052 5.09619H3.28052C3.28052 3.43934 4.62366 2.09619 6.28052 2.09619V0.0961914ZM6.28052 58.0962C4.62366 58.0962 3.28052 56.753 3.28052 55.0962H1.28052C1.28052 57.8576 3.51909 60.0962 6.28052 60.0962V58.0962ZM251.919 2.09619C253.012 2.09619 254.018 2.69026 254.546 3.64696L256.297 2.6808C255.417 1.0863 253.74 0.0961914 251.919 0.0961914V2.09619Z' fill='#7DABF8' mask='url(#path-1-inside-1_3283_1343)'/>

",

"
<mask id='path-1-inside-1_3283_287' fill='#E6F5FF'>
<path fill-rule='evenodd' clip-rule='evenodd' d='M252.528 3.69867C251.824 2.42307 250.482 1.63098 249.026 1.63098H6.16245C3.1177 1.63098 1.1893 4.89738 2.66015 7.5633L14.321 28.6987C14.9846 29.9014 14.9846 31.3605 14.321 32.5633L2.66014 53.6987C1.18929 56.3646 3.11771 59.631 6.16246 59.631H249.026C250.482 59.631 251.824 58.8389 252.528 57.5633L266.321 32.5633C266.985 31.3605 266.985 29.9014 266.321 28.6987L252.528 3.69867Z'/>
</mask>


<path fill-rule='evenodd' clip-rule='evenodd' d='M252.528 3.69867C251.824 2.42307 250.482 1.63098 249.026 1.63098H6.16245C3.1177 1.63098 1.1893 4.89738 2.66015 7.5633L14.321 28.6987C14.9846 29.9014 14.9846 31.3605 14.321 32.5633L2.66014 53.6987C1.18929 56.3646 3.11771 59.631 6.16246 59.631H249.026C250.482 59.631 251.824 58.8389 252.528 57.5633L266.321 32.5633C266.985 31.3605 266.985 29.9014 266.321 28.6987L252.528 3.69867Z' fill='#E6F5FF'/>


<path d='M14.321 28.6987L15.1966 28.2156H15.1966L14.321 28.6987ZM14.321 32.5633L15.1966 33.0464L14.321 32.5633ZM266.321 32.5633L267.197 33.0464V33.0464L266.321 32.5633ZM266.321 28.6987L267.197 28.2156V28.2156L266.321 28.6987ZM2.66014 53.6987L1.78456 53.2156L2.66014 53.6987ZM252.528 3.69867L251.652 4.18175L252.528 3.69867ZM252.528 57.5633L253.404 58.0464L252.528 57.5633ZM2.66015 7.5633L1.78457 8.04637L2.66015 7.5633ZM6.16245 2.63098H249.026V0.630981H6.16245V2.63098ZM15.1966 28.2156L3.53572 7.08022L1.78457 8.04637L13.4455 29.1817L15.1966 28.2156ZM15.1966 33.0464C16.0261 31.5429 16.0261 29.719 15.1966 28.2156L13.4455 29.1817C13.9432 30.0838 13.9432 31.1782 13.4455 32.0802L15.1966 33.0464ZM3.53572 54.1818L15.1966 33.0464L13.4455 32.0802L1.78456 53.2156L3.53572 54.1818ZM249.026 58.631H6.16246V60.631H249.026V58.631ZM265.445 32.0802L251.652 57.0802L253.404 58.0464L267.197 33.0464L265.445 32.0802ZM265.445 29.1817C265.943 30.0838 265.943 31.1782 265.445 32.0802L267.197 33.0464C268.026 31.5429 268.026 29.719 267.197 28.2156L265.445 29.1817ZM251.652 4.18175L265.445 29.1817L267.197 28.2156L253.404 3.21559L251.652 4.18175ZM1.78456 53.2156C-0.0539992 56.548 2.35652 60.631 6.16246 60.631V58.631C3.87889 58.631 2.43258 56.1812 3.53572 54.1818L1.78456 53.2156ZM249.026 2.63098C250.118 2.63098 251.125 3.22505 251.652 4.18175L253.404 3.21559C252.524 1.62109 250.847 0.630981 249.026 0.630981V2.63098ZM249.026 60.631C250.847 60.631 252.524 59.6409 253.404 58.0464L251.652 57.0802C251.125 58.0369 250.118 58.631 249.026 58.631V60.631ZM6.16245 0.630981C2.35651 0.630981 -0.0539932 4.71398 1.78457 8.04637L3.53572 7.08022C2.43258 5.08078 3.87889 2.63098 6.16245 2.63098V0.630981Z' fill='#7DABF8' mask='url(#path-1-inside-1_3283_287)'/>" ) &"        

To check if the item is last we will check if the ID is equal to the count of items in the array. Condition should look like this

If(ThisItem.ID=CountRows(NavMenuGal),"","")        

To combine both of the condition we will make it into a nested If and the complete code will look like this.

" & If(ThisItem.ID=1
"
<mask id='path-1-inside-1_3283_1343' fill='#E6F5FF'>
<path fill-rule='evenodd' clip-rule='evenodd' d='M2.28052 5.09619C2.28052 2.88705 4.07138 1.09619 6.28052 1.09619H251.919C253.376 1.09619 254.718 1.88828 255.421 3.16388L269.214 28.1639C269.878 29.3666 269.878 30.8258 269.214 32.0285L255.421 57.0285C254.718 58.3041 253.376 59.0962 251.919 59.0962H6.28052C4.07138 59.0962 2.28052 57.3053 2.28052 55.0962V5.09619Z'/>
</mask>

<path fill-rule='evenodd' clip-rule='evenodd' d='M2.28052 5.09619C2.28052 2.88705 4.07138 1.09619 6.28052 1.09619H251.919C253.376 1.09619 254.718 1.88828 255.421 3.16388L269.214 28.1639C269.878 29.3666 269.878 30.8258 269.214 32.0285L255.421 57.0285C254.718 58.3041 253.376 59.0962 251.919 59.0962H6.28052C4.07138 59.0962 2.28052 57.3053 2.28052 55.0962V5.09619Z' fill='#E6F5FF'/>

<path d='M269.214 28.1639L270.09 27.6808V27.6808L269.214 28.1639ZM269.214 32.0285L270.09 32.5116V32.5116L269.214 32.0285ZM255.421 57.0285L256.297 57.5116L255.421 57.0285ZM255.421 3.16388L254.546 3.64696L255.421 3.16388ZM251.919 0.0961914H6.28052V2.09619H251.919V0.0961914ZM254.546 3.64696L268.339 28.647L270.09 27.6808L256.297 2.6808L254.546 3.64696ZM268.339 28.647C268.837 29.549 268.837 30.6434 268.339 31.5454L270.09 32.5116C270.919 31.0081 270.919 29.1842 270.09 27.6808L268.339 28.647ZM268.339 31.5454L254.546 56.5454L256.297 57.5116L270.09 32.5116L268.339 31.5454ZM6.28052 60.0962H251.919V58.0962H6.28052V60.0962ZM1.28052 5.09619V55.0962H3.28052V5.09619H1.28052ZM254.546 56.5454C254.018 57.5021 253.012 58.0962 251.919 58.0962V60.0962C253.74 60.0962 255.417 59.1061 256.297 57.5116L254.546 56.5454ZM6.28052 0.0961914C3.51909 0.0961914 1.28052 2.33477 1.28052 5.09619H3.28052C3.28052 3.43934 4.62366 2.09619 6.28052 2.09619V0.0961914ZM6.28052 58.0962C4.62366 58.0962 3.28052 56.753 3.28052 55.0962H1.28052C1.28052 57.8576 3.51909 60.0962 6.28052 60.0962V58.0962ZM251.919 2.09619C253.012 2.09619 254.018 2.69026 254.546 3.64696L256.297 2.6808C255.417 1.0863 253.74 0.0961914 251.919 0.0961914V2.09619Z' fill='#7DABF8' mask='url(#path-1-inside-1_3283_1343)'/>"
,

If(ThisItem.ID=CountRows(NavMenuGal),

"<mask id='path-1-inside-1_3283_2237' fill='white'>
<path fill-rule='evenodd' clip-rule='evenodd' d='M3.07568 7.5633C1.60483 4.89738 3.53323 1.63098 6.57798 1.63098H247.803C250.012 1.63098 251.803 3.42184 251.803 5.63098V55.631C251.803 57.8401 250.012 59.631 247.803 59.631H6.57799C3.53324 59.631 1.60482 56.3646 3.07567 53.6987L14.7366 32.5633C15.4002 31.3605 15.4002 29.9014 14.7366 28.6987L3.07568 7.5633Z'/>
</mask>
<path fill-rule='evenodd' clip-rule='evenodd' d='M3.07568 7.5633C1.60483 4.89738 3.53323 1.63098 6.57798 1.63098H247.803C250.012 1.63098 251.803 3.42184 251.803 5.63098V55.631C251.803 57.8401 250.012 59.631 247.803 59.631H6.57799C3.53324 59.631 1.60482 56.3646 3.07567 53.6987L14.7366 32.5633C15.4002 31.3605 15.4002 29.9014 14.7366 28.6987L3.07568 7.5633Z' fill='#F5FBFF'/>
<path d='M14.7366 32.5633L15.6122 33.0464L14.7366 32.5633ZM14.7366 28.6987L15.6122 28.2156L14.7366 28.6987ZM247.803 0.630981H6.57799V2.63098H247.803V0.630981ZM252.803 55.631V5.63098H250.803V55.631H252.803ZM6.57798 60.631H247.803V58.631H6.57798V60.631ZM13.861 32.0802L2.20009 53.2156L3.95125 54.1818L15.6122 33.0464L13.861 32.0802ZM13.861 29.1817C14.3587 30.0838 14.3587 31.1782 13.861 32.0802L15.6122 33.0464C16.4416 31.5429 16.4416 29.719 15.6122 28.2156L13.861 29.1817ZM2.2001 8.04637L13.861 29.1817L15.6122 28.2156L3.95125 7.08021L2.2001 8.04637ZM6.57798 58.631C4.29442 58.631 2.84811 56.1812 3.95125 54.1818L2.20009 53.2156C0.361528 56.548 2.77205 60.631 6.57798 60.631V58.631ZM250.803 55.631C250.803 57.2878 249.46 58.631 247.803 58.631V60.631C250.564 60.631 252.803 58.3924 252.803 55.631H250.803ZM6.57799 0.630981C2.77205 0.630981 0.361532 4.71397 2.2001 8.04637L3.95125 7.08021C2.84811 5.08078 4.29442 2.63098 6.57799 2.63098V0.630981ZM247.803 2.63098C249.46 2.63098 250.803 3.97413 250.803 5.63098H252.803C252.803 2.86956 250.564 0.630981 247.803 0.630981V2.63098Z' fill='#7DABF8' mask='url(#path-1-inside-1_3283_2237)'/>"
,

"<mask id='path-1-inside-1_3283_287' fill='#E6F5FF'>
<path fill-rule='evenodd' clip-rule='evenodd' d='M252.528 3.69867C251.824 2.42307 250.482 1.63098 249.026 1.63098H6.16245C3.1177 1.63098 1.1893 4.89738 2.66015 7.5633L14.321 28.6987C14.9846 29.9014 14.9846 31.3605 14.321 32.5633L2.66014 53.6987C1.18929 56.3646 3.11771 59.631 6.16246 59.631H249.026C250.482 59.631 251.824 58.8389 252.528 57.5633L266.321 32.5633C266.985 31.3605 266.985 29.9014 266.321 28.6987L252.528 3.69867Z'/>
</mask>

<path fill-rule='evenodd' clip-rule='evenodd' d='M252.528 3.69867C251.824 2.42307 250.482 1.63098 249.026 1.63098H6.16245C3.1177 1.63098 1.1893 4.89738 2.66015 7.5633L14.321 28.6987C14.9846 29.9014 14.9846 31.3605 14.321 32.5633L2.66014 53.6987C1.18929 56.3646 3.11771 59.631 6.16246 59.631H249.026C250.482 59.631 251.824 58.8389 252.528 57.5633L266.321 32.5633C266.985 31.3605 266.985 29.9014 266.321 28.6987L252.528 3.69867Z' fill='#E6F5FF'/>

<path d='M14.321 28.6987L15.1966 28.2156H15.1966L14.321 28.6987ZM14.321 32.5633L15.1966 33.0464L14.321 32.5633ZM266.321 32.5633L267.197 33.0464V33.0464L266.321 32.5633ZM266.321 28.6987L267.197 28.2156V28.2156L266.321 28.6987ZM2.66014 53.6987L1.78456 53.2156L2.66014 53.6987ZM252.528 3.69867L251.652 4.18175L252.528 3.69867ZM252.528 57.5633L253.404 58.0464L252.528 57.5633ZM2.66015 7.5633L1.78457 8.04637L2.66015 7.5633ZM6.16245 2.63098H249.026V0.630981H6.16245V2.63098ZM15.1966 28.2156L3.53572 7.08022L1.78457 8.04637L13.4455 29.1817L15.1966 28.2156ZM15.1966 33.0464C16.0261 31.5429 16.0261 29.719 15.1966 28.2156L13.4455 29.1817C13.9432 30.0838 13.9432 31.1782 13.4455 32.0802L15.1966 33.0464ZM3.53572 54.1818L15.1966 33.0464L13.4455 32.0802L1.78456 53.2156L3.53572 54.1818ZM249.026 58.631H6.16246V60.631H249.026V58.631ZM265.445 32.0802L251.652 57.0802L253.404 58.0464L267.197 33.0464L265.445 32.0802ZM265.445 29.1817C265.943 30.0838 265.943 31.1782 265.445 32.0802L267.197 33.0464C268.026 31.5429 268.026 29.719 267.197 28.2156L265.445 29.1817ZM251.652 4.18175L265.445 29.1817L267.197 28.2156L253.404 3.21559L251.652 4.18175ZM1.78456 53.2156C-0.0539992 56.548 2.35652 60.631 6.16246 60.631V58.631C3.87889 58.631 2.43258 56.1812 3.53572 54.1818L1.78456 53.2156ZM249.026 2.63098C250.118 2.63098 251.125 3.22505 251.652 4.18175L253.404 3.21559C252.524 1.62109 250.847 0.630981 249.026 0.630981V2.63098ZM249.026 60.631C250.847 60.631 252.524 59.6409 253.404 58.0464L251.652 57.0802C251.125 58.0369 250.118 58.631 249.026 58.631V60.631ZM6.16245 0.630981C2.35651 0.630981 -0.0539932 4.71398 1.78457 8.04637L3.53572 7.08022C2.43258 5.08078 3.87889 2.63098 6.16245 2.63098V0.630981Z' fill='#C1C9D2' mask='url(#path-1-inside-1_3283_287)'/>" )) &"        

19. We are almost done hang in there. Now we need to change the colors properties in this SVG code. To show the already visited, non visited and currently selected.

For Selected we will check if the variable "currentID" we set onSelect of the button is equals to thisitem.ID

If(currentID=ThisItem.ID,"#E6F5FF","#E6F5FF")        

For already visited we will set the color for all the items ID's lesser than the selected one.

?If(currentID>ThisItem.ID,"#264A91","white")        

We will set the fill properties in <mask> and both path tags of each condition. Note that the first path tag's fill fill the item and second paths is for the border of the SVG.

Your updated code should look like this.

"data:image/svg+xml;utf8, "&EncodeUrl(
<svg width='269' height='63' viewBox='0 0 269 63' fill='none' xmlns='https://www.w3.org/2000/svg'>
<g filter='url(#filter0_d_3283_287)'>


" & If(ThisItem.ID=1,
"
<mask id='path-1-inside-1_3283_1343' fill='"& If(currentID=ThisItem.ID,"#E6F5FF","#E6F5FF") &"'>
<path fill-rule='evenodd' clip-rule='evenodd' d='M2.28052 5.09619C2.28052 2.88705 4.07138 1.09619 6.28052 1.09619H251.919C253.376 1.09619 254.718 1.88828 255.421 3.16388L269.214 28.1639C269.878 29.3666 269.878 30.8258 269.214 32.0285L255.421 57.0285C254.718 58.3041 253.376 59.0962 251.919 59.0962H6.28052C4.07138 59.0962 2.28052 57.3053 2.28052 55.0962V5.09619Z'/>
</mask>




<path fill-rule='evenodd' clip-rule='evenodd' d='M2.28052 5.09619C2.28052 2.88705 4.07138 1.09619 6.28052 1.09619H251.919C253.376 1.09619 254.718 1.88828 255.421 3.16388L269.214 28.1639C269.878 29.3666 269.878 30.8258 269.214 32.0285L255.421 57.0285C254.718 58.3041 253.376 59.0962 251.919 59.0962H6.28052C4.07138 59.0962 2.28052 57.3053 2.28052 55.0962V5.09619Z' fill='"& If(currentID=ThisItem.ID,"#E6F5FF",If(currentID>ThisItem.ID,"#264A91","#E6F5FF")) &"'/>




<path d='M269.214 28.1639L270.09 27.6808V27.6808L269.214 28.1639ZM269.214 32.0285L270.09 32.5116V32.5116L269.214 32.0285ZM255.421 57.0285L256.297 57.5116L255.421 57.0285ZM255.421 3.16388L254.546 3.64696L255.421 3.16388ZM251.919 0.0961914H6.28052V2.09619H251.919V0.0961914ZM254.546 3.64696L268.339 28.647L270.09 27.6808L256.297 2.6808L254.546 3.64696ZM268.339 28.647C268.837 29.549 268.837 30.6434 268.339 31.5454L270.09 32.5116C270.919 31.0081 270.919 29.1842 270.09 27.6808L268.339 28.647ZM268.339 31.5454L254.546 56.5454L256.297 57.5116L270.09 32.5116L268.339 31.5454ZM6.28052 60.0962H251.919V58.0962H6.28052V60.0962ZM1.28052 5.09619V55.0962H3.28052V5.09619H1.28052ZM254.546 56.5454C254.018 57.5021 253.012 58.0962 251.919 58.0962V60.0962C253.74 60.0962 255.417 59.1061 256.297 57.5116L254.546 56.5454ZM6.28052 0.0961914C3.51909 0.0961914 1.28052 2.33477 1.28052 5.09619H3.28052C3.28052 3.43934 4.62366 2.09619 6.28052 2.09619V0.0961914ZM6.28052 58.0962C4.62366 58.0962 3.28052 56.753 3.28052 55.0962H1.28052C1.28052 57.8576 3.51909 60.0962 6.28052 60.0962V58.0962ZM251.919 2.09619C253.012 2.09619 254.018 2.69026 254.546 3.64696L256.297 2.6808C255.417 1.0863 253.74 0.0961914 251.919 0.0961914V2.09619Z' fill='"& If(currentID=ThisItem.ID,"#7DABF8","#7DABF8") &"' mask='url(#path-1-inside-1_3283_1343)'/>






",
If(ThisItem.ID=CountRows(NavMenuGal),
"
<mask id='path-1-inside-1_3283_1331' fill='"& If(currentID=ThisItem.ID,"#E6F5FF","white") &"'>
<path fill-rule='evenodd' clip-rule='evenodd' d='M3.02441 7.5633C1.55356 4.89738 3.48196 1.63098 6.52671 1.63098H246.751C248.961 1.63098 250.751 3.42184 250.751 5.63098V55.631C250.751 57.8401 248.961 59.631 246.751 59.631H6.52672C3.48197 59.631 1.55355 56.3646 3.0244 53.6987L14.6853 32.5633C15.3489 31.3605 15.3489 29.9014 14.6853 28.6987L3.02441 7.5633Z'/>
</mask>
<path fill-rule='evenodd' clip-rule='evenodd' d='M3.07567 7.56329C1.60482 4.89738 3.53324 1.63098 6.57799 1.63098H247.803C250.012 1.63098 251.803 3.42184 251.803 5.63098V55.631C251.803 57.8401 250.012 59.631 247.803 59.631H6.57798C3.53323 59.631 1.60482 56.3646 3.07567 53.6987L14.7366 32.5633C15.4002 31.3605 15.4002 29.9014 14.7366 28.6987L3.07567 7.56329Z' fill='"& If(currentID=ThisItem.ID,"#E6F5FF" ,"white") &"'/>
<path d='M14.6853 32.5633L15.5609 33.0464L14.6853 32.5633ZM14.6853 28.6987L15.5609 28.2156L14.6853 28.6987ZM246.751 0.630981H6.52672V2.63098H246.751V0.630981ZM251.751 55.631V5.63098H249.751V55.631H251.751ZM6.52671 60.631H246.751V58.631H6.52671V60.631ZM13.8097 32.0802L2.14882 53.2156L3.89998 54.1818L15.5609 33.0464L13.8097 32.0802ZM13.8097 29.1817C14.3074 30.0838 14.3074 31.1782 13.8097 32.0802L15.5609 33.0464C16.3904 31.5429 16.3904 29.719 15.5609 28.2156L13.8097 29.1817ZM2.14883 8.04637L13.8097 29.1817L15.5609 28.2156L3.89998 7.08021L2.14883 8.04637ZM6.52671 58.631C4.24315 58.631 2.79684 56.1812 3.89998 54.1818L2.14882 53.2156C0.310259 56.548 2.72078 60.631 6.52671 60.631V58.631ZM249.751 55.631C249.751 57.2878 248.408 58.631 246.751 58.631V60.631C249.513 60.631 251.751 58.3924 251.751 55.631H249.751ZM6.52672 0.630981C2.72078 0.630981 0.310262 4.71397 2.14883 8.04637L3.89998 7.08021C2.79684 5.08078 4.24315 2.63098 6.52672 2.63098V0.630981ZM246.751 2.63098C248.408 2.63098 249.751 3.97413 249.751 5.63098H251.751C251.751 2.86956 249.513 0.630981 246.751 0.630981V2.63098Z' fill='"& If(currentID=ThisItem.ID,"#7DABF8","#C1C9D2") &"' mask='url(#path-1-inside-1_3283_1331)'/>


",
"
<mask id='path-1-inside-1_3283_287' fill='"& If(currentID=ThisItem.ID,"#E6F5FF","white") &"'>
<path fill-rule='evenodd' clip-rule='evenodd' d='M252.528 3.69867C251.824 2.42307 250.482 1.63098 249.026 1.63098H6.16245C3.1177 1.63098 1.1893 4.89738 2.66015 7.5633L14.321 28.6987C14.9846 29.9014 14.9846 31.3605 14.321 32.5633L2.66014 53.6987C1.18929 56.3646 3.11771 59.631 6.16246 59.631H249.026C250.482 59.631 251.824 58.8389 252.528 57.5633L266.321 32.5633C266.985 31.3605 266.985 29.9014 266.321 28.6987L252.528 3.69867Z'/>
</mask>


<path fill-rule='evenodd' clip-rule='evenodd' d='M252.528 3.69867C251.824 2.42307 250.482 1.63098 249.026 1.63098H6.16245C3.1177 1.63098 1.1893 4.89738 2.66015 7.5633L14.321 28.6987C14.9846 29.9014 14.9846 31.3605 14.321 32.5633L2.66014 53.6987C1.18929 56.3646 3.11771 59.631 6.16246 59.631H249.026C250.482 59.631 251.824 58.8389 252.528 57.5633L266.321 32.5633C266.985 31.3605 266.985 29.9014 266.321 28.6987L252.528 3.69867Z' fill='"& If(currentID=ThisItem.ID,"#E6F5FF" , If(currentID>ThisItem.ID,"#264A91","white")) &"'/>


<path d='M14.321 28.6987L15.1966 28.2156H15.1966L14.321 28.6987ZM14.321 32.5633L15.1966 33.0464L14.321 32.5633ZM266.321 32.5633L267.197 33.0464V33.0464L266.321 32.5633ZM266.321 28.6987L267.197 28.2156V28.2156L266.321 28.6987ZM2.66014 53.6987L1.78456 53.2156L2.66014 53.6987ZM252.528 3.69867L251.652 4.18175L252.528 3.69867ZM252.528 57.5633L253.404 58.0464L252.528 57.5633ZM2.66015 7.5633L1.78457 8.04637L2.66015 7.5633ZM6.16245 2.63098H249.026V0.630981H6.16245V2.63098ZM15.1966 28.2156L3.53572 7.08022L1.78457 8.04637L13.4455 29.1817L15.1966 28.2156ZM15.1966 33.0464C16.0261 31.5429 16.0261 29.719 15.1966 28.2156L13.4455 29.1817C13.9432 30.0838 13.9432 31.1782 13.4455 32.0802L15.1966 33.0464ZM3.53572 54.1818L15.1966 33.0464L13.4455 32.0802L1.78456 53.2156L3.53572 54.1818ZM249.026 58.631H6.16246V60.631H249.026V58.631ZM265.445 32.0802L251.652 57.0802L253.404 58.0464L267.197 33.0464L265.445 32.0802ZM265.445 29.1817C265.943 30.0838 265.943 31.1782 265.445 32.0802L267.197 33.0464C268.026 31.5429 268.026 29.719 267.197 28.2156L265.445 29.1817ZM251.652 4.18175L265.445 29.1817L267.197 28.2156L253.404 3.21559L251.652 4.18175ZM1.78456 53.2156C-0.0539992 56.548 2.35652 60.631 6.16246 60.631V58.631C3.87889 58.631 2.43258 56.1812 3.53572 54.1818L1.78456 53.2156ZM249.026 2.63098C250.118 2.63098 251.125 3.22505 251.652 4.18175L253.404 3.21559C252.524 1.62109 250.847 0.630981 249.026 0.630981V2.63098ZM249.026 60.631C250.847 60.631 252.524 59.6409 253.404 58.0464L251.652 57.0802C251.125 58.0369 250.118 58.631 249.026 58.631V60.631ZM6.16245 0.630981C2.35651 0.630981 -0.0539932 4.71398 1.78457 8.04637L3.53572 7.08022C2.43258 5.08078 3.87889 2.63098 6.16245 2.63098V0.630981Z' fill='"& If(currentID=ThisItem.ID,"#7DABF8","#C1C9D2") &"' mask='url(#path-1-inside-1_3283_287)'/>" ) )&"
</g>
<defs>
<filter id='filter0_d_3283_287' x='0.156738' y='0.630981' width='268.662' height='62' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'>
<feFlood flood-opacity='0' result='BackgroundImageFix'/>
<feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/>
<feOffset dy='1'/>
<feGaussianBlur stdDeviation='1'/>
<feColorMatrix type='matrix' values='0 0 0 0 0.215686 0 0 0 0 0.254902 0 0 0 0 0.317647 0 0 0 0.08 0'/>
<feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_3283_287'/>
<feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_3283_287' result='shape'/>
</filter>
</defs>
</svg>
")"        

Ta Da your gallery should be looking like this.

The blog was getting way too long so I'm going to end it right here in the next part I'll be converting this gallery into a component and applying it on various screens. Also showing you guys how to switch between screens.