ResponsiveMenuLayout creates a left panel menu using NavigationRail. It's main feature is that it reacts to window size changes, and typically hides the menu when in portrait orientation (usually a phone).

The AppBar in this demo app is not a part of the ResponsiveMenuLayout component. Here the main menu button is used to toggle menu visibility, but you can have other toggles, maybe swiping once we have gesture support in flet.

You can from responsive_menu_layout import ResponsiveMenuLayout to use it as a component in your own code, or run the file to see the demo.

Basic landscape layout, menu shown by default

Landscape layout, menu thinner

This is a parameter and a toggle in the demo app.

Landscape layout, menu hidden (completely by default)

Landscape layout, menu shown as icons only instead of hidden

This is a parameter of ResponsiveMenu, and a toggle in the demo app.

Basic portrait layout, menu hidden by default

Portrait layout, menu when shown is on top of the main content

Menu can be dismissed also by clicking outside the menu panel.

Portrait layout, menu can also be minimized to icons instead of being hidden

With the minimize_to_icons parameter, controlled by a toggle in the demo app. Minimizing behavior can also be controlled separately in each orientation by the landscape_minimize_to_icons and portrait_minimize_to_icons parameters.

Route support

Routes are supported by default in the web (selected page slug is part of the url, page can be opened directly with the right url).

Fine-tuning the NavigationRail

NavigationRail can be accessed to make changes directly, although there are some parameters that should be avoided.