Include a Menu Bar in hamburger mode in an AppBar

[Michael DeLange]

Is it possible to have a Menu Bar component using hamburger mode embedded in an AppBar?  The Menu Bar is limited to the vertical height of the AppBar when I tried this.  Thank you for your assistance. 

[LeoLavanya Dhanaraj]

Hi Michsel,

Greetings from Syncfusion Support.

Based on the information provided, we understand that you are trying to embed a Menu component in HamburgerMode within an AppBar. The behavior you are observing occurs because the Menu component is rendered inside the AppBar's layout container, which may restrict the menu's expansion area depending on the generated DOM structure and applied CSS.

To achieve your requirement, we recommend customizing the component's CSS based on your layout needs. In the following sample, we have rendered the Menu component inside the AppBar:

Sample: https://blazorplayground.syncfusion.com/BjVHXlNIdbngKTin

Please review the sample and verify whether it meets your requirement. Additionally, rather than placing the Menu directly inside the AppBar, we recommend using the AppBar as a header container and displaying the navigation content through a more suitable navigation component.

Option 1: AppBar + Sidebar (Recommended)

For responsive applications, consider the following approach:

• Use SfAppBar as the top header.
• Use SfSidebar as the hamburger navigation panel.
• Place SfMenu or SfTreeView inside the Sidebar for navigation.
  
  

Documentation: https://blazor.syncfusion.com/documentation/sidebar/getting-started-webapp#navigation-with-blazor-sidebar

Demos:
https://blazor.syncfusion.com/demos/sidebar/sidebar-with-menu?theme=fluent2
https://blazor.syncfusion.com/demos/sidebar/panel-with-responsive?theme=fluent2

Option 2: AppBar + DropDownButton

If you only need to display a menu of actions from the AppBar, you can use a DropDownButton.

Sample: https://blazorplayground.syncfusion.com/VNhRNPDeHbkQQluu

Documentation: https://blazor.syncfusion.com/documentation/drop-down-menu/getting-started-with-web-app

If the above approaches do not meet your requirement, please share the following details to help us investigate further:

• A brief description of your use case.
• A screenshot or mockup showing the expected behavior.
• A runnable sample demonstrating the issue.
• The AppBar and Menu configuration code used in your application.
• Any custom CSS applied to the AppBar, Menu component, or parent containers.

These details will help us validate the scenario and provide you with an appropriate solution as quickly as possible.

Regards,
Leo Lavanya

[Michael DeLange]

Leo, thank you for the detailed response and for the additional recommended options.  I am going to try the approach mentioned in option 1 and should be able to accomplish the desired responsive layout. I will follow up if I have additional questions and will mark as answered once I verify that gets me headed in the right direction.  Thank you again for your assistance.

[Priyanka Karthikeyan]

Hi Michael,

Thank you for the update.

We are glad to hear that the AppBar + Sidebar approach seems to align with your responsive layout requirements. Please take your time evaluating it in your application. If you encounter any issues or need further assistance during implementation, feel free to reach out with the details, and we will be happy to help.

Regards,

Priyanka K

[Michael DeLange]

The solution mentioned in option 1 is going to work, thank you for your assistance.  On a different topic however, I'm noting that a sidebar with a type of "Push" does not horizontally resize panels correctly in a DashboardLayout on one of my pages.  Full width dashboard panels (SizeX equals the number of dashboard columns) overflow past the right edge of the browser window.  If I resize the browser window manually it corrects itself.  Is there a way to force a refresh of the DashboardLayout when the sidebar is initialized, opened, or closed?

[Priyanka Karthikeyan]

Hi Michael,

We have created a new forum thread for your last query. Please continue the discussion using the forum link below:

https://www.syncfusion.com/forums/198537/include-a-menu-bar-in-hamburger-mode-in-an-appbar-from-198525

Regards,

Priyanka K

[Michael DeLange]

Thank you Priyanka, I will follow the new thread and I have marked this one as answered.