noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Open a submenu from a menu item

Browse Source 
Plan step 22, actions.md § Missing (Submenus): M3's Expressive vertical
menu specifies submenus and the Left/Right keys that open and close them,
and the library had neither.

`<x-menu-item submenu>` puts its slot in a second popover on the item's
end, flipping to the start where there is no room. `materialSubmenu`
reuses the menu button pattern one level in: the item is its own trigger,
so the anchor move and the button lookup are overridden away; Right,
Enter and Space open it, Left and Escape close it and return the focus,
and a fine pointer resting on the item opens it after a moment. `items()`
now stops at the popover it belongs to, so the arrows never walk between
a menu and an open submenu. The menu publishes its container as custom
properties so a vibrant menu's submenus are vibrant too.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:31:56 +02:00
co-authored by Claude Opus 5
parent d74fa250ee
commit 25091ebf21
7 changed files with 462 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/menu-item.blade.php
+54 -2
View File
@@ -13,6 +13,14 @@
is there. `keep-open` leaves the menu open when it is activated — for a choice the person may
want to change twice.
`submenu` turns the item into a menu of its own: the slot holds `<x-menu-item>`s instead of a
label, and they open in a second popover beside this one, on the item's end, flipping to its
start where the window has no room. The item says so — `aria-haspopup="menu"`,
`aria-expanded`, and a chevron at its end — and keeps the APG menu keyboard: Right, Enter or
Space open it on its first item, Left or Escape close it and come back here, and on a fine
pointer resting on the item opens it. Choosing anything inside closes the whole menu, as it
would from the outer list.
`icon-class` is for an icon whose colour means something of its own, a sport's glyph in the
sport's colour (`icon-class="text-sport-run"`). A colour there paints the icon, a selected
item's too: the icon's own colour then carries no specificity, because which of two colour
@@ -41,12 +49,18 @@
'badge' => null,
'disabled' => false,
'keepOpen' => false,
'submenu' => false,
])
@php
$isLink = filled($link);
$tag = $isLink ? 'a' : 'button';
// A submenu's own popover, named like the menu's: a new id and a new anchor name with every
// render, matched through a morph by the key rather than by either of them.
$key = $submenu ? \Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10)) : null;
$anchor = $submenu ? "--material-submenu-{$key}" : null;
$attributes = $attributes
->class([
'group/item state-layer flex w-full min-h-12 cursor-pointer items-center gap-3 px-4 text-start outline-none',
@@ -64,12 +78,19 @@
'aria-current' => $current ? 'page' : null,
'aria-disabled' => $disabled ? 'true' : null,
'tabindex' => '-1',
'x-ref' => $submenu ? 'trigger' : null,
'style' => $submenu ? "anchor-name: {$anchor}" : null,
'aria-haspopup' => $submenu ? 'menu' : null,
'aria-expanded' => $submenu ? 'false' : null,
'aria-controls' => $submenu ? "material-submenu-{$key}" : null,
'x-on:click' => $submenu ? "toggle('first')" : null,
'type' => $isLink ? null : 'button',
'href' => $isLink ? $link : null,
'target' => $isLink && $external ? '_blank' : null,
'rel' => $isLink && $external ? 'noopener' : null,
'wire:navigate' => $isLink && ! $external && ! $noWireNavigate && ! $attributes->has('wire:navigate') ? true : null,
'data-keep-open' => $keepOpen ? true : null,
// Opening a submenu is not choosing anything: the outer menu stays where it was.
'data-keep-open' => $keepOpen || $submenu ? true : null,
], fn ($value): bool => $value !== null));
$iconInk = match (true) {
@@ -88,13 +109,21 @@
};
@endphp
@if ($submenu)
<div x-data="materialSubmenu"
x-on:keydown.right.prevent.stop="open('first')"
x-on:pointerenter="hover($event)"
x-on:pointerleave="unhover()"
>
@endif
<{{ $tag }} {{ $attributes }}>
@if ($icon)
<x-livewire-material::icon :name="$icon" optical="20" :filled="$selected === true || $current" :class="$leadingIcon" />
@endif
<span class="min-w-0 flex-1">
<span class="block truncate type-body-lg">{{ $label ?? $slot }}</span>
<span class="block truncate type-body-lg">{{ $submenu ? $label : ($label ?? $slot) }}</span>
@if ($description)
<span @class(['block type-body-md', $iconInk])>{{ $description }}</span>
@@ -110,8 +139,31 @@
@if ($iconRight)
<x-livewire-material::icon :name="$iconRight" optical="20" :class="'size-5 '.$iconInk" />
@elseif ($submenu)
{{-- M3's submenu marker: it points the way the list opens, and turns over in an RTL page. --}}
<x-livewire-material::icon name="chevron_right" optical="20" :class="'size-5 rtl:-scale-x-100 '.$iconInk" />
@elseif ($selected === true)
{{-- The third cue M3 recommends, so a chosen item is not told by colour and shape alone. --}}
<x-livewire-material::icon name="check" optical="20" :class="'size-5 '.$iconInk" />
@endif
</{{ $tag }}>
@if ($submenu)
<div
x-ref="menu"
{{ new \Illuminate\View\ComponentAttributeBag(['wire:key' => 'material-submenu-'.substr(md5((string) $label), 0, 10)]) }}
id="material-submenu-{{ $key }}"
popover="auto"
role="menu"
data-submenu
aria-label="{{ $label }}"
tabindex="-1"
style="position-anchor: {{ $anchor }}"
x-on:keydown.stop="navigate($event)"
x-on:click="activate($event)"
class="m-0 mx-1 min-w-28 max-w-70 max-h-[min(18rem,calc(100dvh-2rem))] origin-top overflow-y-auto border-0 p-1 rounded-corner-lg shadow-elevation-2 popover-transition [inset:auto] [position-area:inline-end_span-block-end] [position-try-fallbacks:flip-inline]"
>
{{ $slot }}
</div>
</div>
@endif
resources/views/components/menu.blade.php
+2
View File
@@ -69,6 +69,8 @@
id="material-menu-{{ $key }}"
popover="auto"
role="menu"
data-menu
@if ($vibrant) data-vibrant @endif
@if ($label) aria-label="{{ $label }}" @endif
tabindex="-1"
style="position-anchor: {{ $anchor }}"
resources/views/showcase/sections/menus.blade.php
+26 -1
View File
@@ -36,6 +36,30 @@
<x-menu-item label="Upload a folder" icon="drive_folder_upload" />
</x-menu>
BLADE,
'Submenus' => <<<'BLADE'
<x-menu label="Share actions">
<x-slot:trigger>
<x-button label="Share" icon="share" variant="tonal" />
</x-slot:trigger>
<x-menu-item label="Copy link" icon="content_copy" shortcut="⌘C" />
<x-menu-item label="Send to" icon="send" submenu>
<x-menu-item label="A person" icon="person" />
<x-menu-item label="A team" icon="group" />
<x-menu-item label="Somewhere else" icon="more_horiz" submenu>
<x-menu-item label="Slack" icon="chat" />
<x-menu-item label="Email" icon="mail" />
</x-menu-item>
</x-menu-item>
<x-menu-item label="Export as" icon="download" submenu>
<x-menu-item label="ZIP" icon="folder_zip" />
<x-menu-item label="PDF" icon="picture_as_pdf" />
<x-menu-item label="CSV" icon="table" disabled />
</x-menu-item>
<x-menu-separator />
<x-menu-item label="Delete" icon="delete" />
</x-menu>
BLADE,
'Icons in their own colour' => <<<'BLADE'
<x-menu label="New plan">
<x-slot:trigger>
@@ -56,7 +80,8 @@
<p class="max-w-3xl type-body-md text-on-surface-variant">
<code>&lt;x-menu&gt;</code> with <code>&lt;x-menu-item&gt;</code>, <code>&lt;x-menu-group&gt;</code> and <code>&lt;x-menu-separator&gt;</code>.
Open one with the keyboard too: arrows, Home, End, a letter, Escape.
Open one with the keyboard too: arrows, Home, End, a letter, Escape. A <code>submenu</code> item opens a second list beside it
&mdash; Right to enter it, Left to come back.
</p>
@foreach ($examples as $title => $code)