Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

from starhtml import *

Div(
    Menubar(
        MenubarMenu(
            MenubarTrigger("File"),
            MenubarContent(
                MenubarItem("New Tab", MenubarShortcut("⌘T")),
                MenubarItem("New Window", MenubarShortcut("⌘N")),
                MenubarItem("New Incognito Window", disabled=True),
                MenubarSeparator(),
                MenubarSub(
                    MenubarSubTrigger("Share"),
                    MenubarSubContent(
                        MenubarItem(Icon("lucide:mail"), "Email"),
                        MenubarItem(Icon("lucide:message-circle"), "Message"),
                        MenubarSeparator(),
                        MenubarItem(Icon("lucide:notebook"), "Notes"),
                    ),
                ),
                MenubarSeparator(),
                MenubarItem("Print", MenubarShortcut("⌘P")),
            ),
        ),
        MenubarMenu(
            MenubarTrigger("Edit"),
            MenubarContent(
                MenubarItem("Undo", MenubarShortcut("⌘Z")),
                MenubarItem("Redo", MenubarShortcut("⇧⌘Z")),
                MenubarSeparator(),
                MenubarItem("Find", MenubarShortcut("⌘F")),
                MenubarItem("Find and Replace", MenubarShortcut("⌘⇧H")),
                MenubarSeparator(),
                MenubarItem("Cut"),
                MenubarItem("Copy"),
                MenubarItem("Paste"),
            ),
        ),
        MenubarMenu(
            MenubarTrigger("View"),
            MenubarContent(
                MenubarCheckboxItem("Always Show Bookmarks Bar", signal=show_bookmarks),
                MenubarCheckboxItem("Always Show Full URLs", signal=show_urls),
                MenubarSeparator(),
                MenubarItem("Reload", MenubarShortcut("⌘R"), inset=True),
                MenubarItem("Force Reload", MenubarShortcut("⇧⌘R"), inset=True, disabled=True),
                MenubarSeparator(),
                MenubarItem("Toggle Fullscreen", inset=True),
                MenubarSeparator(),
                MenubarItem("Hide Sidebar", inset=True),
            ),
        ),
        MenubarMenu(
            MenubarTrigger("Profiles"),
            MenubarContent(
                MenubarRadioGroup(
                    MenubarRadioItem("Andy", value="andy"),
                    MenubarRadioItem("Benoit", value="benoit"),
                    MenubarRadioItem("Luis", value="luis"),
                    signal=profile,
                ),
                MenubarSeparator(),
                MenubarItem("Edit…", inset=True),
                MenubarSeparator(),
                MenubarItem("Add Profile…", inset=True),
            ),
        ),
    ),
)

Installation

CLI

Install the component using the StarUI CLI:

star add menubar

Examples

Minimal

Two menus, five items — the smallest useful menubar. A good starting point for adding a menu bar to any app.

With Labels

MenubarLabel adds non-interactive section headings inside menus. This design-tool menubar groups appearance, panel toggles, and canvas settings under labeled sections.

Submenus

Nested menus using MenubarSub, MenubarSubTrigger, and MenubarSubContent. File has a recent-files submenu; Edit cascades Find and Replace into their own sub-panels.

With Icons

Icons paired with menu items. The destructive Log Out variant renders both icon and text in the destructive color.

API Reference

Component	Description
`Menubar`	Root container managing active menu state via signal
`MenubarMenu`	Wrapper for a single menu (trigger + content pair)
`MenubarTrigger`	Button that opens the menu; supports hover-open when another menu is active
`MenubarContent`	Positioned content panel with side, align, and side_offset
`MenubarItem`	Clickable item with optional icon, variant, disabled, and inset
`MenubarCheckboxItem`	Toggleable item bound to a boolean signal
`MenubarRadioGroup`	Container for mutually exclusive radio items sharing a signal
`MenubarRadioItem`	Single-select item within a radio group
`MenubarSub`	Wrapper for nested submenu with its own open state
`MenubarSubTrigger`	Item that opens a submenu (chevron-right added automatically)
`MenubarSubContent`	Positioned panel for submenu items
`MenubarSeparator`	Horizontal rule between menu sections
`MenubarLabel`	Non-interactive heading with optional inset alignment
`MenubarShortcut`	Right-aligned keyboard shortcut hint