How to build Hamburger Menu?

[syaifulnizamyahya]

Seems like there are at least 2 ways on how to build hamburger menu.
https://platform.uno/docs/articles/external/uno.toolkit.ui/doc/controls/NavigationBar.html
https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Tutorials/Navigation/Advanced/HowTo-ResponsiveShell.html

Which one is the recommended way? Is there a simple template that have navigation bar? Are there simple application (with best practive) that I can start with?

[morning4coffe-dev]

Hey @syaifulnizamyahya,

Thanks for your question. Both options are viable, but it really depends on what you're building. Could you provide more details? I might be able to help with your decision.

Generally speaking, I think the first link you shared is more suited for a mobile NavigationBar, and we use it in our Recommended template when you first create your app using our Wizard or at new.platform.uno. It’s great for streamlined, simple and very mobile-friendly navigation.

The second link you shared demonstrates how to build your app using uno.extensions navigation, which aligns more with what I would consider a "Hamburger menu" (known as NavigationView in modern UWP) with the combination of a TabBar control (usually placed on the bottom of the page). This approach is typically used for applications with more complex navigation structures, especially on larger screens / when you need a responsive UI across all the device types.

Let me know if this helps or if you need further clarification.

[syaifulnizamyahya]

Hi @morning4coffe-dev

All I want is to create a hamburger menu that is practical in all platform. As long as it works without issue, I'm fine. The reason I look into Uno is I want to develop multiplatform application without having to deal with platform specific intricacies (or at least reduce it as much as I can).

I was looking for best practice in developing hamburger menu. I tried reading the docs but without real success. I tried Template Studio and MAUI App Accelerator and I find it much easier to start as it provide hamburger menu in the template itself.

I would suggest Uno Platform to provide best practice to implement hamburger menu using MVUX and MVVM because, I'm unable to integrate MVUX to my application with any real success.

So my question, in your opinion, what would you say is the best practice/approach to implement hamburger menu in Uno Platform using MVVM and .NET frame navigations? Any samples?

Also, do you have any plans to add hamburger menu to the uno platform template?

Thanks.

[morning4coffe-dev]

@syaifulnizamyahya I see. I think the best approach is to use the NavigationView that I described above. You can also combine it with the NavigationBar at the top.

At the moment, we don't provide a template for this. However, feel free to open a feature request. In the meantime, you can check out this sample—it will be merged soon, but you can fetch the branch it’s on even now. This sample demonstrates various ways of navigating with the NavigationView/TabBar and showcases the controls and how to use them properly. You can even use this solution as a starting point for your project by simply removing any parts you don't need. Let me know if the sample helps.

In your comment, you mentioned:

I'm unable to integrate MVUX into my application with any real success.

Could you please share more details (perhaps in a different discussion) about what led you to switch to MVVM? What were your pain points? Maybe we can help, or if you've already made up your mind, your experience could help others facing the same issues.

[nathenxbrewer]

@syaifulnizamyahya did you ever implement this? Can you share an example? Thanks

[morning4coffe-dev]

Hey @nathenxbrewer,

before @syaifulnizamyahya replies, did you have a chance to look at the Navigation Samples I mentioned above? Apart of navigation, it also provides a showcase of using NavigationView/TabBar with your UI.