Laravel Menubar Component

Free · MIT

The File / Edit / View bar of a desktop application, with the keyboard behaviour that makes it one.

A Menubar built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::menubar>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::menubar label="Document">
    <x-aura::menubar.menu label="File" :index="0">
        <x-aura::menubar.item shortcut="Ctrl+N">New</x-aura::menubar.item>
        <x-aura::menubar.item shortcut="Ctrl+O">Open…</x-aura::menubar.item>
        <x-aura::menubar.item shortcut="Ctrl+S">Save</x-aura::menubar.item>
    </x-aura::menubar.menu>

    <x-aura::menubar.menu label="Edit" :index="1">
        <x-aura::menubar.item shortcut="Ctrl+Z">Undo</x-aura::menubar.item>
        <x-aura::menubar.item shortcut="Ctrl+Y" disabled>Redo</x-aura::menubar.item>
    </x-aura::menubar.menu>

    <x-aura::menubar.menu label="View" :index="2">
        <x-aura::menubar.item href="/docs">Documentation</x-aura::menubar.item>
    </x-aura::menubar.menu>
</x-aura::menubar>

See the full API, props and live examples in the Menubar documentation.

Overview

<x-aura::menubar> is the menu bar of an application: a row of menus that open on click or on Down, and that you move between with Left and Right.

What separates it from a row of dropdowns is the tab order. The whole bar is one stop: a roving tabindex moves the focus between the menus with the arrow keys, so Tab leaves the bar rather than walking through every menu in it. That is the behaviour people expect from a menu bar, and it is the reason the pattern exists.

Props

Prop	Type	Default	Description
`label`	`string\|null`	`null`	Names the bar. Defaults to the translated "Main menu".

Item

Prop	Type	Default	Description
`href`	`string\|null`	`null`	Renders a link instead of a button. Unknown schemes become `#`.
`shortcut`	`string\|null`	`null`	Shown, and hidden from assistive technology: the shortcut belongs to the application, and read aloud it is noise.
`disabled`	`bool`	`false`	`disabled` on a button, `aria-disabled` on a link.

See more examples and every variant in the Menubar documentation.

Laravel-native

No JavaScript framework. Pure Blade, Livewire & Alpine.

Dark mode & themeable

Tailwind 4 CSS variables and a visual Theme Studio.

Accessible

Colour contrast tested against WCAG 2.1 AA/UI in CI; ARIA attributes on select components.

Related components

Select

A styled dropdown select input with label, hint, error states, and a sub-component for options.

Prose

Typographic defaults for long-form content whose markup you do not control.

Phone Input

A telephone number and its country code, both real form controls, posted as one.

Activity Row

One entry in an activity feed, with a date a machine can read.

Textarea

A multi-line text input component with label, hint, error states, character counting, and auto-resize support.

Description List

Key-value pair display for structured data like details, metadata, and summaries.

Browse all components

Prop	Type	Default	Description
`label`	`string`	`''`	The trigger's text, and the open menu's name.
`index`	`int`	`0`	Its position in the bar. Required when there is more than one menu — two menus that both think they are the first open together.