Completed
Last Updated: 26 Jul 2022 17:14 by ADMIN
JeffSM
Created on: 27 Jan 2020 17:59
Category: Menu
Type: Feature Request
31
[Mobile] Responsive menu - adapt to a Hamburger menu for small screens

Dear,

 

the blazor menu UI adapt it self for hamburguer menu when mobile?

best,

 

Jeff

---

ADMIN EDIT

I have attached to this post a sample implementation that you can use as base. Another option is to add more conditional markup to remove the menu altogether and replace it with another structure for small screens. A third option is to use the Drawer component as it collapses anyway (see here and here).

----

7 comments
ADMIN
Joana
Posted on: 26 Jul 2022 17:14

Hello everyone,

The Menu component that contains popups as building blocks is designed for desktop resolutions. Thus, we have created a sample demo that use our Drawer, Menu and MediaQuery component to provide a good user experience under any device.

https://demos.telerik.com/blazor-ui/menu/adaptive

I am marking the request as completed because we now have all pieces to achieve the functionality. However, please share any feedback.

Regards,
Joana
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Marin Bratanov
Posted on: 26 Mar 2022 12:46

Hi César,

The Drawer approach is different than a Menu situation and while the concept is the same the results and goals differ. In your ticket my colleague Svetoslav mad a sample for you and you can preview it here until it gets published as actual KB article.

 

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

César
Posted on: 25 Mar 2022 07:22

Thanks for sample, but if we use drawer How can we do it?

Is it necessary to change from drawer to sidebar for small devices?

ADMIN
Marin Bratanov
Posted on: 24 Dec 2020 10:04

Hello all,

I have edited the opener post to have a sample implementation and some other ideas that you can consider.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

ADMIN
Marin Bratanov
Posted on: 19 Dec 2020 08:45

Hello Shannon,

The best way to get updates is to click the Follow button - you will receive emails for anything that happens here, including when a release is known.

Blazor is an extremely young framework - its WASM flavor was made official in May this year, its first official version is just over a year old. And yet we have over 60 native components, with a grid that covers the majority of features that you can find in suites that are a decade or more old. It's inevitable that there will be some catching up to do.

That said, for the time being you can consider the drawer as it is already collapsible, and some conditional markup to either have a drawer + button to expand it, or a menu. Alternatively, you can tweak the menu data based on your screen size condition to add a root-level data item that has a hamburger menu icon only.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Shannon
Posted on: 18 Dec 2020 15:59
It's been almost a year and there has been no update on this.  Is there an update?
ADMIN
Marin Bratanov
Posted on: 27 Jan 2020 18:28

Hello Jeff,

I moved this enhancement idea to our Feedback Portal where you can Follow its status. Here's a link for you: https://feedback.telerik.com/blazor/1450998-hamburguer-menu.

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor