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

Overflow an app bar's trailing actions below medium

Browse Source 
Plan step 25, item 7 (navigation Missing: "App bar, trailing-action
overflow at small widths"). `<x-app-bar :actions="[...]">` takes the
trailing actions as a list whose entries take <x-menu-item>'s props plus
any action attribute. M3 allows up to two trailing icon buttons, and up
to four on larger screens, and lets trailing actions collapse into an
overflow menu at smaller breakpoints: below medium the bar keeps at most
two icon buttons, from medium four, the "More options" button counted
among them, the rest in its menu. Both forms render and media queries
pick one, so there is no script and no flash; each width has its own
menu so the arrow keys never reach a hidden row. The actions slot still
takes markup and never overflows.

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 10:57:50 +02:00
co-authored by Claude Opus 5
parent 12cdeaaf67
commit 092100c6ae
5 changed files with 223 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/boost/skills/livewire-material-development/SKILL.md
+10
View File
@@ -851,6 +851,16 @@ M3 Expressive top app bar, sticky by default (`:sticky="false"` to scroll away),
</x-app-bar>
```
`:actions` also takes a list, most used first; each entry takes `<x-menu-item>`'s props (`label`, `icon`, `link`, `external`, `no-wire-navigate`, `disabled`, `selected`) and passes every other key (`wire:click`, `x-on:click`) through as an attribute. The list overflows as M3's trailing actions do: at most two icon buttons below `medium` (600px) and four from it, the `more_vert` "More options" button counted among them, and the rest in a menu behind it. Pure CSS — both forms render, each width hides one — so no flash and no script. Every icon button is named and tooltipped by its `label`. Only the list overflows: markup in the `actions` slot is drawn as written, and a slot replaces a list. M3 still prefers a toolbar to an app bar full of actions.
```blade
<x-app-bar title="holiday-photos" :actions="[
['label' => 'Share', 'icon' => 'share', 'wire:click' => 'share'],
['label' => 'Download', 'icon' => 'download', 'link' => route('shares.download', $share)],
['label' => 'Rename', 'icon' => 'edit', 'x-on:click' => 'renaming = true'],
]" />
```
A collapsing bar needs the window to scroll: no ancestor with `overflow-hidden`/`overflow-auto` (`overflow-x-clip` is fine).
### `<x-toolbar>`