Components
Menubar
A visually persistent menu common in desktop applications.
php artisan blatui:add menubar
Share
Find
<x-ui.menubar>
<x-ui.menubar-menu>
<x-ui.menubar-trigger>File</x-ui.menubar-trigger>
<x-ui.menubar-content>
<x-ui.menubar-item>New Tab <x-ui.menubar-shortcut>⌘T</x-ui.menubar-shortcut></x-ui.menubar-item>
<x-ui.menubar-item>New Window <x-ui.menubar-shortcut>⌘N</x-ui.menubar-shortcut></x-ui.menubar-item>
<x-ui.menubar-item disabled>New Incognito Window</x-ui.menubar-item>
<x-ui.menubar-separator />
<x-ui.menubar-sub>
<x-ui.menubar-sub-trigger>Share</x-ui.menubar-sub-trigger>
<x-ui.menubar-sub-content>
<x-ui.menubar-item>Email link</x-ui.menubar-item>
<x-ui.menubar-item>Messages</x-ui.menubar-item>
<x-ui.menubar-item>Notes</x-ui.menubar-item>
</x-ui.menubar-sub-content>
</x-ui.menubar-sub>
<x-ui.menubar-separator />
<x-ui.menubar-item>Print... <x-ui.menubar-shortcut>⌘P</x-ui.menubar-shortcut></x-ui.menubar-item>
</x-ui.menubar-content>
</x-ui.menubar-menu>
<x-ui.menubar-menu>
<x-ui.menubar-trigger>Edit</x-ui.menubar-trigger>
<x-ui.menubar-content>
<x-ui.menubar-item>Undo <x-ui.menubar-shortcut>⌘Z</x-ui.menubar-shortcut></x-ui.menubar-item>
<x-ui.menubar-item>Redo <x-ui.menubar-shortcut>⇧⌘Z</x-ui.menubar-shortcut></x-ui.menubar-item>
<x-ui.menubar-separator />
<x-ui.menubar-sub>
<x-ui.menubar-sub-trigger>Find</x-ui.menubar-sub-trigger>
<x-ui.menubar-sub-content>
<x-ui.menubar-item>Search the web</x-ui.menubar-item>
<x-ui.menubar-separator />
<x-ui.menubar-item>Find...</x-ui.menubar-item>
<x-ui.menubar-item>Find Next</x-ui.menubar-item>
</x-ui.menubar-sub-content>
</x-ui.menubar-sub>
<x-ui.menubar-separator />
<x-ui.menubar-item>Cut</x-ui.menubar-item>
<x-ui.menubar-item>Copy</x-ui.menubar-item>
<x-ui.menubar-item>Paste</x-ui.menubar-item>
</x-ui.menubar-content>
</x-ui.menubar-menu>
<x-ui.menubar-menu>
<x-ui.menubar-trigger>View</x-ui.menubar-trigger>
<x-ui.menubar-content>
<x-ui.menubar-checkbox-item :checked="true">Always Show Bookmarks Bar</x-ui.menubar-checkbox-item>
<x-ui.menubar-checkbox-item>Always Show Full URLs</x-ui.menubar-checkbox-item>
<x-ui.menubar-separator />
<x-ui.menubar-item inset>Reload <x-ui.menubar-shortcut>⌘R</x-ui.menubar-shortcut></x-ui.menubar-item>
<x-ui.menubar-item inset disabled>Force Reload</x-ui.menubar-item>
<x-ui.menubar-separator />
<x-ui.menubar-item inset>Toggle Fullscreen</x-ui.menubar-item>
</x-ui.menubar-content>
</x-ui.menubar-menu>
<x-ui.menubar-menu>
<x-ui.menubar-trigger>Profiles</x-ui.menubar-trigger>
<x-ui.menubar-content>
<x-ui.menubar-radio-group value="benoit">
<x-ui.menubar-radio-item value="andy">Andy</x-ui.menubar-radio-item>
<x-ui.menubar-radio-item value="benoit">Benoit</x-ui.menubar-radio-item>
<x-ui.menubar-radio-item value="luis">Luis</x-ui.menubar-radio-item>
</x-ui.menubar-radio-group>
<x-ui.menubar-separator />
<x-ui.menubar-item inset>Edit...</x-ui.menubar-item>
<x-ui.menubar-separator />
<x-ui.menubar-item inset>Add Profile...</x-ui.menubar-item>
</x-ui.menubar-content>
</x-ui.menubar-menu>
</x-ui.menubar>Simple
<x-ui.menubar>
<x-ui.menubar-menu>
<x-ui.menubar-trigger>File</x-ui.menubar-trigger>
<x-ui.menubar-content>
<x-ui.menubar-item>New <x-ui.menubar-shortcut>⌘N</x-ui.menubar-shortcut></x-ui.menubar-item>
<x-ui.menubar-item>Open <x-ui.menubar-shortcut>⌘O</x-ui.menubar-shortcut></x-ui.menubar-item>
<x-ui.menubar-separator />
<x-ui.menubar-item>Save <x-ui.menubar-shortcut>⌘S</x-ui.menubar-shortcut></x-ui.menubar-item>
</x-ui.menubar-content>
</x-ui.menubar-menu>
<x-ui.menubar-menu>
<x-ui.menubar-trigger>Help</x-ui.menubar-trigger>
<x-ui.menubar-content>
<x-ui.menubar-item>Documentation</x-ui.menubar-item>
<x-ui.menubar-item>Keyboard shortcuts</x-ui.menubar-item>
<x-ui.menubar-separator />
<x-ui.menubar-item>About BlatUI</x-ui.menubar-item>
</x-ui.menubar-content>
</x-ui.menubar-menu>
</x-ui.menubar>API Reference
Props, slots and exposed methods for
<x-ui.menubar>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
align |
string
|
'start'
|
Set on <x-ui.menubar-content>. Aligns the dropdown along the trigger edge it is anchored to.
start
center
end
|
side |
string
|
'bottom'
|
Set on <x-ui.menubar-content>. Which edge of the trigger the dropdown opens from.
top
right
bottom
left
|
sideOffset |
int
|
8
|
Set on <x-ui.menubar-content>. Gap in pixels between the trigger and the dropdown. |
href |
string
|
— | Set on <x-ui.menubar-item>. Renders the item as a link (<a>) to this URL instead of a button. |
variant |
string
|
'default'
|
Set on <x-ui.menubar-item>. Use destructive to style dangerous actions in the destructive color.
default
destructive
|
inset |
bool
|
false
|
Set on an item, label, or sub-trigger to add left padding so its text aligns with items that have a leading icon or check. |
disabled |
bool
|
false
|
Set on <x-ui.menubar-item> to disable it (not focusable, not clickable, dimmed). |
checked |
bool
|
false
|
Set on <x-ui.menubar-checkbox-item> for its initial checked state. |
closeOnSelect |
bool
|
false
|
Set on a checkbox/radio item to close the menu after toggling (defaults to false so the menu stays open). |
value |
string
|
— | On <x-ui.menubar-radio-group> it is the initially selected value; on each <x-ui.menubar-radio-item> it is that option's value. The matching item is shown as selected. |
Slots
| Slot | Description |
|---|---|
default |
A row of <x-ui.menubar-menu> blocks. The menubar holds shared roving-focus state across all triggers. |
menu |
Each <x-ui.menubar-menu> pairs one <x-ui.menubar-trigger> with its <x-ui.menubar-content> and owns that menu's id. |
trigger |
Content of <x-ui.menubar-trigger> — the top-level label that opens its menu. |
content |
Content of <x-ui.menubar-content> — items, separators, checkbox/radio items, and submenus. Teleported to <body>. |
Methods
Available on the component's Alpine scope — call them from markup in the slot
(e.g. @click="…").
| Method | Description |
|---|---|
openMenu(id, focusFirst = true) |
Opens the menu with the given id and, by default, focuses its first item. |
toggleMenu(id) |
Opens the menu with the given id if closed, otherwise closes it. |
closeMenu(returnFocus = true) |
Closes the open menu and, unless returnFocus is false, restores focus to its trigger. |
moveTrigger(dir, fromId) |
Moves between top-level triggers (dir 1 = next, -1 = previous), switching the open menu when one is already open. |