Menu Bar

a desktop-style menu strip with dropdown menus.

▶ Run in browser

Tags: ui menu menubar desktop-ui

A MenuBar pinned to the top of the window with File, Edit and View menus. Each dropdown lists items with shortcut hints (File and Edit group theirs with separators), opens over the content panel below, and closes when an item is chosen. A status label along the bottom edge echoes the last action so every entry is visibly wired up.

What it demonstrates

• MenuBar.add_menu(title, items) building a menu strip from plain data.

• MenuItem(text=..., callback=..., shortcut=...) and MenuItem(separator=True).

• Reserving the bar’s fixed height inside a stretching VBoxContainer with MenuBar.BAR_HEIGHT, min_size and stretch_ratio = 0.

• Dropdowns drawing over the content panel beneath them.

Run: uv run python examples/features/ui/menus.py Headless self-check: uv run python examples/features/ui/menus.py –test

Source

"""Menu Bar: a desktop-style menu strip with dropdown menus.

A `MenuBar` pinned to the top of the window with File, Edit and View menus.
Each dropdown lists items with shortcut hints (File and Edit group theirs with
separators), opens over the content panel below, and closes when an item is
chosen. A status label along
the bottom edge echoes the last action so every entry is visibly wired up.

# /// simvx
# tags = ["ui", "menu", "menubar", "desktop-ui"]
# web = { root = "MenuDemo", width = 800, height = 600, responsive = true }
# ///

## What it demonstrates
- `MenuBar.add_menu(title, items)` building a menu strip from plain data.
- `MenuItem(text=..., callback=..., shortcut=...)` and `MenuItem(separator=True)`.
- Reserving the bar's fixed height inside a stretching `VBoxContainer` with
  `MenuBar.BAR_HEIGHT`, `min_size` and `stretch_ratio = 0`.
- Dropdowns drawing over the content panel beneath them.

Run: uv run python examples/features/ui/menus.py
Headless self-check: uv run python examples/features/ui/menus.py --test
"""

from simvx.core import (
    AnchorPreset,
    Colour,
    Label,
    MenuBar,
    MenuItem,
    Node,
    Panel,
    SizingMode,
    VBoxContainer,
    Vec2,
)
from simvx.graphics import App


class MenuDemo(Node):
    """Root node for menu bar demo scene."""

    def on_ready(self):
        root = VBoxContainer(name="Root")
        root.set_anchor_preset(AnchorPreset.FULL_RECT)
        root.separation = 0
        root.sizing = SizingMode.EXPAND
        self.add_child(root)

        # --- Menu bar (fixed height, full width) ---
        menubar = MenuBar(name="menubar")
        menubar.min_size = Vec2(0, MenuBar.BAR_HEIGHT)
        menubar.stretch_ratio = 0.0
        root.add_child(menubar)

        status = Label("Ready")
        status.text_colour = Colour.LIGHT_GRAY

        def make_action(label):
            def handler():
                status.text = f"Action: {label}"

            return handler

        # File menu
        menubar.add_menu(
            "File",
            [
                MenuItem(text="New", callback=make_action("New"), shortcut="Ctrl+N"),
                MenuItem(text="Open", callback=make_action("Open"), shortcut="Ctrl+O"),
                MenuItem(text="Save", callback=make_action("Save"), shortcut="Ctrl+S"),
                MenuItem(separator=True),
                MenuItem(text="Quit", callback=lambda: self.app.quit(), shortcut="Ctrl+Q"),
            ],
        )

        # Edit menu
        menubar.add_menu(
            "Edit",
            [
                MenuItem(text="Undo", callback=make_action("Undo"), shortcut="Ctrl+Z"),
                MenuItem(text="Redo", callback=make_action("Redo"), shortcut="Ctrl+Y"),
                MenuItem(separator=True),
                MenuItem(text="Cut", callback=make_action("Cut"), shortcut="Ctrl+X"),
                MenuItem(text="Copy", callback=make_action("Copy"), shortcut="Ctrl+C"),
                MenuItem(text="Paste", callback=make_action("Paste"), shortcut="Ctrl+V"),
            ],
        )

        # View menu
        menubar.add_menu(
            "View",
            [
                MenuItem(text="Zoom In", callback=make_action("Zoom In"), shortcut="Ctrl++"),
                MenuItem(text="Zoom Out", callback=make_action("Zoom Out"), shortcut="Ctrl+-"),
                MenuItem(text="Reset Zoom", callback=make_action("Reset Zoom"), shortcut="Ctrl+0"),
            ],
        )

        # --- Main content panel (takes the remaining window height) ---
        content = Panel(name="ContentPanel")
        content.bg_colour = Colour.hex("#1A1A2E")
        root.add_child(content)

        center_label = Label("Click File, Edit or View to open a menu")
        center_label.text_colour = Colour.GRAY
        center_label.font_size = 16.0
        center_label.set_anchor_preset(AnchorPreset.CENTER)
        center_label.margin_left = -220
        center_label.margin_right = 220
        center_label.margin_top = -15
        center_label.margin_bottom = 15
        center_label.alignment = "center"
        content.add_child(center_label)

        # --- Status bar ---
        status.set_anchor_preset(AnchorPreset.BOTTOM_WIDE)
        status.margin_left = 10
        status.margin_right = 10
        status.margin_top = -30
        status.margin_bottom = -10
        content.add_child(status)


def _selftest() -> bool:
    """Headless: open the menus by clicking their titles and choose items by row.

    A title is found where the bar draws it, so the click lands on the strip the
    user aims at rather than at a computed guess; an item is clicked at the row the
    open popup occupies, from its own rect and ``item_height``. The status label is
    the demo's one output and every assertion reads it back.
    """
    from simvx.core.ui.testing import UITestHarness

    harness = UITestHarness(MenuDemo(name="MenuDemo"), screen_size=(800, 600))
    ok = True

    def check(label: str, passed: bool, detail: str) -> None:
        nonlocal ok
        ok = ok and passed
        print(f"{'ok  ' if passed else 'FAIL'} {label}: {detail}")

    harness.tick()
    menubar = harness.find_by_name("menubar")
    status = harness.find_by_text("Ready")
    _, bar_y, _, bar_h = menubar.get_global_rect()

    def title_point(name: str) -> tuple[float, float]:
        """The middle of the bar strip where ``name`` is drawn."""
        drawn = next(c for c in harness.draw_log.calls_of_type("text") if c.text == name)
        return (drawn.x + 2, bar_y + bar_h / 2)

    def open_menu(name: str):
        harness.click(title_point(name))
        harness.tick()
        return next(popup for title, popup in menubar.menus if title == name)

    def click_item(popup, index: int) -> None:
        gx, gy, gw, _ = popup.get_global_rect()
        harness.click((gx + gw / 2, gy + popup.item_height * (index + 0.5)))
        harness.tick()

    check(
        "the bar reserves its own fixed height and lists all three menus",
        bar_h == MenuBar.BAR_HEIGHT and [title for title, _ in menubar.menus] == ["File", "Edit", "View"],
        f"{bar_h:.0f}px bar: " + ", ".join(title for title, _ in menubar.menus),
    )

    file_menu = open_menu("File")
    check(
        "clicking a title drops its menu open below the bar",
        file_menu.visible and file_menu.get_global_rect()[1] >= bar_y + bar_h,
        f"File popup at y={file_menu.get_global_rect()[1]:.0f}, below a bar ending at {bar_y + bar_h:.0f}",
    )

    click_item(file_menu, 2)  # Save
    check(
        "choosing an item runs its callback and closes the menu",
        status.text == "Action: Save" and not file_menu.visible,
        f"{status.text!r}, popup visible = {file_menu.visible}",
    )

    # A separator is a row that draws but does nothing: clicking it must leave the
    # status line where it was, while still dismissing the menu like any click.
    file_menu = open_menu("File")
    separator = next(i for i, item in enumerate(file_menu.items) if item.separator)
    click_item(file_menu, separator)
    check(
        "clicking a separator changes nothing but still closes the menu",
        status.text == "Action: Save" and not file_menu.visible,
        f"row {separator} of File left the status at {status.text!r}",
    )

    # Hovering a different title while one menu is open switches to it, which is
    # the behaviour a desktop menu strip is expected to have.
    file_menu = open_menu("File")
    harness.mouse_move(title_point("Edit"))
    harness.tick()
    edit_menu = next(popup for title, popup in menubar.menus if title == "Edit")
    check(
        "hovering another title while a menu is open switches the open menu",
        edit_menu.visible and not file_menu.visible,
        f"File {file_menu.visible}, Edit {edit_menu.visible}",
    )

    click_item(edit_menu, 4)  # Copy, past Edit's separator
    check(
        "and the second menu's items are wired up just as the first's are",
        status.text == "Action: Copy",
        status.text,
    )

    view_menu = open_menu("View")
    check(
        "every item carries the shortcut hint it was given",
        [item.shortcut for item in view_menu.items] == ["Ctrl++", "Ctrl+-", "Ctrl+0"],
        ", ".join(f"{item.text} {item.shortcut}" for item in view_menu.items),
    )
    harness.click((400.0, 400.0))  # anywhere off the chain dismisses it
    harness.tick()
    check(
        "clicking away from the bar dismisses the open menu",
        not view_menu.visible,
        f"View popup visible = {view_menu.visible}",
    )

    harness.teardown()
    print("SELFTEST:", "PASS" if ok else "FAIL")
    return ok


if __name__ == "__main__":
    import sys

    if "--test" in sys.argv:
        sys.exit(0 if _selftest() else 1)
    app = App(title="SimVX Menu Demo", width=800, height=600)
    app.run(MenuDemo())