[Mobile] Responsive menu - adapt to a Hamburger menu for small screens

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 26 Jul 2022 17:14 by ADMIN

JeffSM

Created on: 27 Jan 2020 17:59

Category: Menu

Type: Feature Request

[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).

----

Attached Files:

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

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