Skip to main content

Menubar

A Shadcn menu bar: a row of menu buttons, like the menus of a desktop app.

Each MenubarItem opens a menu of MenuItem controls.

Example:

shad.Menubar(
    items=[
        shad.MenubarItem(
            "File",
            items=[
                shad.MenuItem("New tab", trailing="Ctrl+T", on_click=new_tab),
                shad.MenuItem(
                    "Print...", trailing="Ctrl+P", on_click=print_page
                ),
            ],
        ),
    ]
)
Menubar
Menubar

Inherits: LayoutControl

Properties

  • items - The menus of this bar.
  • select_on_hover - Whether, once a menu is open, hovering another menu button opens that menu instead.

Example​

Shadcn Menubar​

play_arrowTry Online
import flet_shadcn_ui as shad

import flet as ft


def main(page: ft.Page):
    page.title = "Shadcn Menubar"

    def handle_click(e: ft.Event[shad.MenuItem]):
        status.value = f"Clicked: {e.control.content}"

    def item(label: str, **kwargs) -> shad.MenuItem:
        return shad.MenuItem(label, on_click=handle_click, **kwargs)

    def divider() -> shad.Separator:
        return shad.Separator(margin=ft.Margin.symmetric(vertical=4))

    status = ft.Text("Pick a menu item")

    page.add(
        ft.SafeArea(
            content=ft.Column(
                spacing=16,
                controls=[
                    shad.Menubar(
                        items=[
                            shad.MenubarItem(
                                "File",
                                items=[
                                    item("New Tab", trailing="Ctrl+T"),
                                    item("New Window", trailing="Ctrl+N"),
                                    item("New Incognito Window", disabled=True),
                                    divider(),
                                    shad.MenuItem(
                                        "Share",
                                        items=[
                                            item("Email link"),
                                            item("Messages"),
                                            item("Notes"),
                                        ],
                                    ),
                                    divider(),
                                    item("Print...", trailing="Ctrl+P"),
                                ],
                            ),
                            shad.MenubarItem(
                                "Edit",
                                items=[
                                    item("Undo", trailing="Ctrl+Z"),
                                    item("Redo", trailing="Ctrl+Shift+Z"),
                                    divider(),
                                    item("Cut"),
                                    item("Copy"),
                                    item("Paste"),
                                ],
                            ),
                            shad.MenubarItem(
                                "View",
                                items=[
                                    item(
                                        "Show Bookmarks Bar",
                                        leading=shad.LucideIcons.CHECK,
                                    ),
                                    item("Show Full URLs", inset=True),
                                    divider(),
                                    item("Reload", inset=True, trailing="Ctrl+R"),
                                ],
                            ),
                        ]
                    ),
                    status,
                ],
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)
menubar
Opening File, then Share, and clicking Messages

Properties​

itemsclass-attributeinstance-attribute​

items: list[MenubarItem] = field(default_factory=list)

The menus of this bar.

select_on_hoverclass-attributeinstance-attribute​

select_on_hover: bool = True

Whether, once a menu is open, hovering another menu button opens that menu instead.