Menu Bar

a desktop-style menu strip with dropdown menus.

▶ Run in browser

Tags: ui menu menubar desktop-ui

A MenuBar is a strip of titles; clicking one drops its menu open, and while a menu is open, hovering another title switches to that menu. Choosing an item runs its callback and closes the menu, as does clicking anywhere else or pressing Escape. Here the bar holds File, Edit and View menus, and a status line along the bottom echoes the last item chosen.

Build a menu from plain data with MenuBar.add_menu(title, items), where each entry is a MenuItem:

• MenuItem(text=..., callback=...) runs callback() with no arguments when chosen; functools.partial binds any arguments it needs.

• shortcut="Ctrl+S" prints a hint at the right of the row. It is text only: binding the key is the game’s job.

• MenuItem(separator=True) draws a divider that does nothing when clicked.

The bar is placed with anchor=Anchor.TOP_WIDE, full width and MenuBar.BAR_HEIGHT tall, and the content panel fills the window below it with inset=(0, MenuBar.BAR_HEIGHT, 0, 0). Dropdowns are overlays, so they draw over the panel and take input ahead of it while open.

Source

# /// simvx
# tags = ["ui", "menu", "menubar", "desktop-ui"]
# web = { width = 800, height = 600, responsive = true }
# ///
"""Menu Bar: a desktop-style menu strip with dropdown menus.

A `MenuBar` is a strip of titles; clicking one drops its menu open, and while
a menu is open, hovering another title switches to that menu. Choosing an item
runs its callback and closes the menu, as does clicking anywhere else or
pressing Escape. Here the bar holds File, Edit and View menus, and a status
line along the bottom echoes the last item chosen.

Build a menu from plain data with `MenuBar.add_menu(title, items)`, where each
entry is a `MenuItem`:

- `MenuItem(text=..., callback=...)` runs `callback()` with no arguments when
  chosen; `functools.partial` binds any arguments it needs.
- `shortcut="Ctrl+S"` prints a hint at the right of the row. It is text only:
  binding the key is the game's job.
- `MenuItem(separator=True)` draws a divider that does nothing when clicked.

The bar is placed with `anchor=Anchor.TOP_WIDE`, full width and
`MenuBar.BAR_HEIGHT` tall, and the content panel fills the window below it
with `inset=(0, MenuBar.BAR_HEIGHT, 0, 0)`. Dropdowns are overlays, so they
draw over the panel and take input ahead of it while open.
"""

from functools import partial

from simvx.core import Anchor, Colour, Label, MenuBar, MenuItem, Node, Panel
from simvx.graphics import App


class MenuDemo(Node):
    def on_ready(self):
        content = self.add_child(Panel(anchor=Anchor.FULL_RECT, inset=(0, MenuBar.BAR_HEIGHT, 0, 0)))
        content.bg_colour = Colour.hex("#1A1A2E")
        hint = content.add_child(Label("Click File, Edit or View to open a menu", anchor=Anchor.CENTER, font_size=16))
        hint.text_colour = Colour.GRAY
        self.status = content.add_child(Label("Ready", anchor=Anchor.BOTTOM_LEFT, inset=10))
        self.status.text_colour = Colour.LIGHT_GRAY

        menubar = self.add_child(MenuBar(name="menubar", anchor=Anchor.TOP_WIDE))
        menubar.add_menu(
            "File",
            [
                self.item("New", "Ctrl+N"),
                self.item("Open", "Ctrl+O"),
                self.item("Save", "Ctrl+S"),
                MenuItem(separator=True),
                MenuItem(text="Quit", callback=lambda: self.app.quit(), shortcut="Ctrl+Q"),
            ],
        )
        menubar.add_menu(
            "Edit",
            [
                self.item("Undo", "Ctrl+Z"),
                self.item("Redo", "Ctrl+Y"),
                MenuItem(separator=True),
                self.item("Cut", "Ctrl+X"),
                self.item("Copy", "Ctrl+C"),
                self.item("Paste", "Ctrl+V"),
            ],
        )
        menubar.add_menu(
            "View",
            [self.item("Zoom In", "Ctrl++"), self.item("Zoom Out", "Ctrl+-"), self.item("Reset Zoom", "Ctrl+0")],
        )

    def item(self, text: str, shortcut: str) -> MenuItem:
        """A menu entry that reports itself on the status line when chosen."""
        return MenuItem(text=text, callback=partial(self.chose, text), shortcut=shortcut)

    def chose(self, text: str):
        self.status.text = f"Action: {text}"


if __name__ == "__main__":
    App(title="SimVX Menu Demo", width=800, height=600).run(MenuDemo())