How to build a Responsive Navigation Menu in Power Apps

[@edwardhodson6493]

Reza, with his usual heroics! Absolutely amazing work as always. Thank you for producing such well refined, high quality content.

[@RezaDorrani]

Thank You

[@Tejasvi-l8u]

How did you add emojis to the names of the tabs?

[@SourceCodeUniversity]

This video is GOLD. The way you explain is just perfect.

[@RezaDorrani]

Thank You

[@rorsara3940]

The community is lucky to have champions like you. I can't tell you how grateful I am for all your dedication to sharing your knowledge and skills.

[@RezaDorrani]

Wow, thank you so much

[@oluwatobiyusuf]

Thank you Reza. Amazing work

[@freddierocha2098]

Hello Reza! On my phone or preview performed in the application, my screen does not go to horizontal mode. Anything I need to set up?

[@RezaDorrani]

In app settings, make sure scale to fit is OFF and lock orientation is OFF

[@spontaneousorder5670]

Fantastic video. The only change I made on the setup was to use the enum instead of Size = 1. I think Size = ScreenSize.Small is easier to read.

[@RezaDorrani]

👍

[@swatisoneji147]

Awesome as usual, very much informative, Thank you so much for sharing !

[@RezaDorrani]

My pleasure!

[@coryg1971]

Great Video and explanation! One question, when hovering over an item in the menu is it possible to change the color of the item? I don't see an option in the properties such as a hover color.

[@RezaDorrani]

I don't believe the modern control currently has that option

[@Rasec-Gonzalez]

Your videos have helped me a lot, thank you for each one of them and especially for your way of explaining every detail. Greetings from Chile

[@RezaDorrani]

Great to hear! Thanks so much

[@ellimalasan6145]

So much easy to follow and understand your work Sir Reza. Really great!

[@RezaDorrani]

Glad to hear that!

[@ellimalasan6145]

I'd like to join your channel on Silver Club because I need to know more for my project in our company@@RezaDorrani

[@napoleonnilo6469]

Great as always! You're a God!

[@RezaDorrani]

Most welcome

[@_JezzaG]

Awesome, thanks Reza! Just redesigning one of my apps and this is exactly what I need.

[@aderibigbeadeyinka7136]

Thank you Reza for this tutorial. can you do a video to show us how to add gallery to the third container and make its responsive?

[@RezaDorrani]

Welcome! Check my playlist on responsive design. O have done many videos showcasing responsive galleries

[@abhisheksagar9259]

I've used Tab List before in my project but this feels more...Neat😅. Thanks Reza, your videos are always very helpful.

[@RezaDorrani]

You're welcome 😊

[@erakkarthik]

Thank you Reza.. You are really helpful.. I was able to complete a complex Power App project by referring your videos...

[@RezaDorrani]

Great!

[@kalpeshpatil2713]

Wonderful. Thanks Reza as always

[@RezaDorrani]

Most welcome

[@hamytube]

Thank you @Reza for your videos. Very helpful.

[@RezaDorrani]

Most welcome

[@spotnuru83]

Just Easy and Super Step by Step Tutorial

[@RezaDorrani]

Great to hear

[@techdrift73]

Awesome video, succint and very useful will definitely be implemented

[@steventhawe1598]

I appreciate your clear explanations, Reza. Your tutorials make it easy for me to understand, and my work has become much more manageable as a result. I am sincerely grateful for your assistance.

[@RezaDorrani]

You're very welcome and thanks so much for the appreciation

[@PowerLowCode]

Very good video! One question, why don't you use a gallery for the navbar? Would it have weaknesses?

[@RezaDorrani]

I have done many videos on galleries for navigation. Here Im simply showing a different approach.

[@PowerLowCode]

Thanks for the fast response!

[@hokemspitter]

Really nice and well explained. Quick question: How to I add icons to the menu titles? Thanks.

[@RezaDorrani]

The only option we have with tablist control as of now is emojis

[@hokemspitter]

How to add the emoji to the MenuData formula? @@RezaDorrani

[@Learnpowerplatform]

Another masterpiece.very informative,👍👍

[@RezaDorrani]

Thank you! Cheers!

[@dougydoe]

I've just been able to watch this video after bookmarking it on Monday. This is super cool and using the screen size feature to get the required responsiveness is something that would have save me hours if I hade seen this video earlier. 🤣🤣. Thanks for sharing and always a delight to watch your videos.

[@RezaDorrani]

Awesome! Thank you!

[@VickneshWaran]

Amazing content and great explanation as Always 👍

[@RezaDorrani]

Much appreciated!

[@jaredt.4048]

Thank you for publishing this. Do you also have a video on how to create the colorful data in the main container at the 13 minute mark? Thanks for all you do for us!

[@RezaDorrani]

Its based on a mix bag of videos I did before -> check playlists on responsive design and modern controls. The App is made available for download for channel members (check video description for details)

[@jaredt.4048]

Thank you, Reza, you’re amazing.

[@yaynative]

Amazing content once again!

[@RezaDorrani]

Thanks again!

[@hitasajil3869]

Great video, Req: May be in your next video we will be able to see toggle icon to collapse and expand the menu :)

[@RezaDorrani]

Thanks! I have no plans for a video on that. I make videos when I receive multiple requests on a topic. Every 6 months I ask subscribers for topic suggestions on Community Tab of my channel. Most voted idea gets added to my backlog. Make sure to post this idea whenever I post the next topic suggestion post.

[@pellecarlen]

Very good tutorial! I guess I would have to create multilevel menus if I want more than three menu items. Otherwise the items would fit on the vertical phone screen. Do you have a tutorial for this?

[@RezaDorrani]

I have done videos on left navigation which shows multi level.

[@SourceCodeUniversity]

I have a question, is there any way to make the tablist scrollable? In my project I have a lot of links in the nav bar and I am trying to figure out how can user scroll the nav bar up and down to access all those links. At the moment, it shows three dots and we have to click on it to see all those additional links in the tablist. Thank you so much.

[@RezaDorrani]

Tablist currently does not support scrolling.

[@duonghung2709]

Hi Reza, I followed as your guildine, but can not add 2 fields on tab list. They are disappeared.

[@RezaDorrani]

Video description has link to download entire solution (members only - check description for details) I would suggest giving that a try. As for the issue mentioned, I have not experienced it and hence not sure what the cause for it could be. I will recommend posting your issue on forums in case someone has experienced something similar powerusers.microsoft.com

[@pellecarlen]

I don't have the choice to enable modern controls. Do you have any idea to why?

[@pellecarlen]

Just took me an hour to realize that it's been moved to the Updates tab...

[@RezaDorrani]

Check updates tab :)

[@DrezelRS]

Can you wrap text in a modern tab list? I can’t find it in the controls

[@RezaDorrani]

Currently, it does not wrap

[@Tejasvi-l8u]

@RezaDorrani I want to create a left navigation with icons and highlight the selected left nav option for the current screen. Is it possible with the tabs list discussed, else do I need to implement gallery just like the usual idea of left navigation component? The left navigation menu component is restricting the app responsiveness although the design is impressive. Please suggest on my query

[@RezaDorrani]

Should be possible with multiple tabs but not something I have tried.

[@Tejasvi-l8u]

@@RezaDorrani multiple tabs as in gallery?

[@RezaDorrani]

@@Tejasvi-l8u I would have to try it out to know the options. I will recommend checking or posting your query on forums in case someone has done something similar powerusers.microsoft.com/

[@Tejasvi-l8u]

@@RezaDorrani posted my query in the portal

[@RezaDorrani]

@@Tejasvi-l8u good luck

[@快樂人-c8q]

Reza, I don't know why I can't find the modern controls and themes toggle

[@RezaDorrani]

Because its under settings and general now

[@joaovitor12365]

Hi Reza, I was wondering if there was any way of validating this menu, for example the following users x and y cannot enter some of the screens, but user z has full access to the screens.

[@RezaDorrani]

kzbin.info/www/bejne/nJOngntmq66mhJo

[@joaovitor12365]

Right, thank you very much. But I don't understand how to do this validation in the menu that you explain in this video that I'm commenting on! @@RezaDorrani

[@RezaDorrani]

@@joaovitor12365 Menu can get its data from collection. You will need to mix and match logic from multiple videos.

[@spotnuru83]

Really great but i have a query here, dont you think we are kind of duplicating things here like the header, side bar and etc?? because if we have change something, we need to go and change in all the Screen's related Header and side bar.. is there a better way to handle this? if so it will be great help

[@RezaDorrani]

Answer is components. Check documentation on components.

[@kamozzi1]

HI Reza, can we do these kid of changes to an existing PowerApps?

[@RezaDorrani]

kzbin.info/www/bejne/mHbFimt4nc1rsNk

[@rsaikrishna]

Very nice use case. Thank you Reza

[@RezaDorrani]

Most welcome Krishna

[@vuxuanhai7311]

Thank you Reza, could you please create a series from A to Z to create a powerapps pipeline, from Dev Environment to Prod Enviroment?

[@RezaDorrani]

Welcome! My rule for making videos is set “I make videos when I receive multiple requests on a topic. Every 6 months I ask subscribers for topic suggestions on Community Tab of my channel. Most voted idea gets added to my backlog. Make sure to post this idea whenever I post the next topic suggestion post.”

[@ericmoisan6568]

Hello Reza, I have been following your videos and so far I have been able to figure thigs out using these videos. This one has me stumped. Just trying the tab list like in your video and I'm getting an error trying to navigate to the Screens. the OnSelect option gives me an error in Navigate(Self.Selected.GoToScreen). the GoToScreen is underlined in red with the message "The first argument of 'Navigate' should be a control or screen." When I change Navigate to Notify, the text comes up properly. Any insights? Thanks

[@RezaDorrani]

I have not come across this issue and hence not sure what is the cause for your issue. Video description has link to download the App (members only - check description for details)

[@ericmoisan6568]

I did find my issue. I was setting up the screen names as text fields and then trying to convert the text to navigate. now that I'm actually using the screen names, works fine Thanks, again for the very informative videos & instructions

[@mrhansros]

Hi Reza. Thank you for this video. My Tablist however suddenly become 3 dots instead of listing out the MenuData. In preview mode, i need to click on 3 dots and then only it will list out my MenuData. Can you please advise on how the Tablist to not become 3 dots?

[@RezaDorrani]

If there is not enough real estate then it will show 3 dots. Check the steps and the output shown in video.

[@mrhansros]

my bad. i just need to enable the flexible height for the Tablist and it no longer become 3 dots.

[@Tomaszrobin]

Hi Reza Due to regional characters in Europe, I have to use ; instead , I get an error about unexpected characters when I type a formula MenuData = [{MenuTitle:"Home";GoToScreen:'Home Screen'}]; Do you know what could be the cause? Regards, Tomasz

[@Tomaszrobin]

Ok nevermind I used double ;; in the end and it works :)

[@RezaDorrani]

Looks like you got it to work

[@gkvgulshan]

Hi, I created an approval workflow with attachment, attachment is working fine till send and wait for approval,after approval attachment is not there when the creator gets a response. Is there any platform where I can send photos to the flow

[@RezaDorrani]

Im not sure about this

[@manikantamorla6058]

How to check the opionset or drop-down is empty in if condition. If drop down was empty, datacard value still showing required field

[@RezaDorrani]

I have done multiple videos on gallery filters where I have checked if dropdown is empty. I would recommend checking those videos:

[@santiagogr1795]

Is it possible to use icons instead of the emojis?

[@RezaDorrani]

Currently, not in a tab list

[@Ploplox]

The tab list is showing ny menudata alphabetically is there a way to avoid this?

[@RezaDorrani]

I believe that’s the default behavior. Probably an option can be to sort the items property of tab list control.

[@spotnuru83]

Is there a way to show Menu based on the person and what kind of role or job the person has?? if you could teach us how to do it will be great.

[@RezaDorrani]

kzbin.info/www/bejne/nJOngntmq66mhJosi=O9jaqiFhT36bg1tG kzbin.info/www/bejne/gF7LfoCOp7CAjKcsi=mVP1ZiYWQwsnQkPL

[@Tejasvi-l8u]

Is there a way to add icons to the tab list?

[@RezaDorrani]

Currently, No

[@Tejasvi-l8u]

How did you add emojis to the names in the tabs list?

[@RezaDorrani]

@@Tejasvi-l8u windows+. to open emoji keyboard

[@Tejasvi-l8u]

@@RezaDorrani I want to create a left navigation with icons and highlight the selected left nav option for the current screen. Is it possible with the tabs list discussed, else do I need to implement gallery just like the usual idea of left navigation component? The left navigation menu component is restricting the app responsiveness although the design is impressive. Please suggest on my query

[@RezaDorrani]

@@Tejasvi-l8u Use the gallery technique

[@CloudhoundCoUk]

Magnificent.

[@RezaDorrani]

Thanks

[@mikedsjr]

Ah. Ok. My guesses were wrong. Now I know take what I learned and I apply the methods to what I’m doing.

[@RezaDorrani]

Good luck

[@aimannishat2120]

Hi Reza, I’ve just started learning power apps. I’m very worried about functions that I use, often get stucked with errors and unable to resolve them. Can you please guide me best way to play around with functions?

[@RezaDorrani]

Documentation learn.microsoft.com/en-us/power-platform/power-fx/formula-reference

[@aimannishat2120]

@@RezaDorrani I do refer this link, however I still get stuck with errors. Any easy way to learn and apply logics to it?

[@RezaDorrani]

@@aimannishat2120 I am doing a LIVE training session on formulas on Jan 28th. Its for Channel Members (Training Tier).

[@ckwirey]

Question (Tab List Ordering): Does anyone know how to stop Power Apps from automatically alphabetizing the tab list? I'm using Reza's method (which is brilliant), but Power Apps forces alphabetical (ascending) ordering of the list. How do I stop it? I want to use Reza's method--but I also need the tab list to be in a custom order. Thanks in advance to anyone who answers!

[@RezaDorrani]

I have not experienced this in my app's version. Might be a bug in a particular auth version

[@ckwirey]

@@RezaDorrani! I sincerely appreciate you taking the time to answer my question. Thank you, Sir. Your videos are excellent. I will reach out within my organization, and raise this problem. If they can replicate it, perhaps we'll find an answer.

[@RezaDorrani]

@@ckwirey If you get the answer, please post it here as well, so others can benefit. Thanks so much

[@jeromedawn7263]

can you repost the download link for this?

[@RezaDorrani]

Can you please comment on the community secured post where link was shared?

[@jeromedawn7263]

@@RezaDorrani I don't see the community sceured post where link was shared that's why I commented here sorry

[@RezaDorrani]

@@jeromedawn7263 Find any secured post link and make the request. I cannot share here as this is the public video comments section.

[@Ayan_YT11]

Reza Goat ❤

[@Lineage2Ragnarok]

i love 🥰

[@MohammadAli-ts2ev]

Hi Reza, That's an awesome piece 🧩. Is there a way to add sub-menue in the Tablist control.

[@RezaDorrani]

Thanks! No submenu option. For that use galleries -> kzbin.info/www/bejne/aYSTmWWkhKmWrq8