Wirestrap is still in active development

This project is pre-1.0 and may introduce breaking changes at any time without prior notice.

Navigation container with collapsible groups. Items are free HTML — links, buttons, anything — defined as named slots. Groups are built with menu.accordion, a sub-component that nests inside any item slot and adds animated expand/collapse.

Basic usage

Each item is a named slot. The slot name becomes the item key and must be unique within the menu. Any HTML element goes inside, typically a link.

<x-wirestrap::menu id="nav">
    <x-slot:dashboard>
        <a href="#">Dashboard</a>
    </x-slot:dashboard>
    <x-slot:profile>
        <a href="#">Profile</a>
    </x-slot:profile>
    <x-slot:settings>
        <a href="#">Settings</a>
    </x-slot:settings>
</x-wirestrap::menu>

Accordion groups

Place a menu.accordion inside any item slot to create a collapsible group. Give it a unique id, that's its key for open/close state and external control. Pass open to render it expanded on initial load.

<x-wirestrap::menu id="nav">
    <x-slot:dashboard> ... </x-slot:dashboard>

    <x-slot:settings_group>
        <x-wirestrap::menu.accordion id="settings" label="Settings" open>
            <x-slot:general> ... </x-slot:general>
            <x-slot:security>... </x-slot:security>
        </x-wirestrap::menu.accordion>
    </x-slot:settings_group>

    <x-slot:reports_group>
        <x-wirestrap::menu.accordion id="reports" label="Reports">
            <x-slot:monthly> ... </x-slot:monthly>
            <x-slot:annual> ... </x-slot:annual>
        </x-wirestrap::menu.accordion>
    </x-slot:reports_group>
</x-wirestrap::menu>

Single-open mode

By default, any number of groups can be open at once. Pass single to the menu to close the currently open group when another one is expanded.

<x-wirestrap::menu id="nav" single> ... </x-wirestrap::menu>

Rich trigger

When plain text isn't enough for the trigger, use the trigger slot on menu.accordion. It replaces the label prop entirely: you can put icons, badges, or any markup in there.

<x-wirestrap::menu id="nav">
    <x-slot:reports_group>
        <x-wirestrap::menu.accordion id="reports">
            <x-slot:trigger>
                <i class="bi bi-bar-chart"></i>
                <span>Reports</span>
                <span class="badge ms-auto">3</span>
            </x-slot:trigger>

            <x-slot:monthly> ... </x-slot:monthly>
            <x-slot:annual> ... </x-slot:annual>
        </x-wirestrap::menu.accordion>
    </x-slot:reports_group>
</x-wirestrap::menu>

Nesting

A menu.accordion can be placed inside another accordion's item slot. Keys must be unique across the entire menu. In single mode, only groups at the same level are affected: opening a nested group never closes its parent.

<x-wirestrap::menu id="nav">
    <x-slot:settings_group>
        <x-wirestrap::menu.accordion id="settings" label="Settings" open>
            <x-slot:general> ... </x-slot:general>

            <x-slot:advanced_group>
                <x-wirestrap::menu.accordion id="advanced" label="Advanced">
                    <x-slot:api> ... </x-slot:api>
                    <x-slot:webhooks> ... </x-slot:webhooks>
                </x-wirestrap::menu.accordion>
            </x-slot:advanced_group>
        </x-wirestrap::menu.accordion>
    </x-slot:settings_group>
</x-wirestrap::menu>

With single, opening a group only closes its siblings ; the parent stays open.

External control

Enable events on the menu to control accordion groups from anywhere via the $wirestrap.menu Alpine magic helper. The key is the id of the target menu.accordion.

<x-wirestrap::menu id="nav" events>
    <x-slot:settings_group>
        <x-wirestrap::menu.accordion id="settings" label="Settings">
            <x-slot:general> ... </x-slot:general>
        </x-wirestrap::menu.accordion>
    </x-slot:settings_group>
</x-wirestrap::menu>

<button x-on:click="$wirestrap.menu.show('nav', 'settings')">Show Settings</button>
<button x-on:click="$wirestrap.menu.toggle('nav', 'settings')">Toggle Settings</button>

If the target group is inside a collapsed parent, $wirestrap.menu.show() opens all ancestor groups automatically before opening the target.

Props

Global configuration

Most prop defaults can be overridden globally via config/wirestrap.php.

x-wirestrap::menu

Prop	Type	Default	Description
`id`	`string\|null`	`null`	Element id. Required when strict mode is enabled.
`single`	`bool`	`config`	When true, opening a group closes all others.
`events`	`bool`	`config`	Enable external control via the $wirestrap.menu Alpine magic helper.
No results found

x-wirestrap::menu.accordion

Prop	Type	Default	Description
`id`	`string\|null`	`null`	Required. Used as the group key for open/close state and external control.
`label`	`string\|null`	`null`	Trigger button text. Falls back to id if omitted. Overridden by the trigger slot.
`open`	`bool`	`false`	Renders the group expanded on initial load.
No results found

$wirestrap.menu

Method	Type	Default	Description
`$wirestrap.menu.show(id, key)`	`--`	`--`	Open the group identified by key.
`$wirestrap.menu.hide(id, key)`	`--`	`--`	Close the group identified by key.
`$wirestrap.menu.toggle(id, key)`	`--`	`--`	Toggle the group identified by key.
No results found

⭐ GitHub

Menu