[Toolkit][Shadcn] Add dropdown-menu and sidebar recipes by Amoifr · Pull Request #3469 · symfony/ux

Amoifr · 2026-04-14T18:09:58Z

Q	A
Bug fix?	no
New feature?	yes
Deprecations?	no
Documentation?	no
Issues	Part of #3233
License	MIT

Hi 👋

Two more recipes from #3233 (previous batches: #3464, #3466, #3467, #3468). Still JS-free:

dropdown-menu — click-triggered menu backed by native <details> / <summary> (same pattern as the popover recipe in [Toolkit][Shadcn] Add menubar and popover recipes #3468). Ships with Trigger, Content, Item, Label, and Separator sub-components.
sidebar — static fixed-width layout (<aside>) with a side prop (left / right). Ships with Header, Content, Footer, Group, GroupLabel, and MenuButton sub-components. Note: shadcn's official Sidebar supports collapse/expand via a context provider, which requires JS; this recipe ships the static-layout version — happy to drop it if you'd rather wait for the interactive variant.

Each recipe has Usage.html.twig, Demo.html.twig, and passing snapshot tests (252 tests, 504 assertions).

Thanks! 🙏

Kocal · 2026-04-14T20:49:30Z

Can you change the base branch to 3.x please, the 2.x is not maintained anymore.

Thanks!

Status: Needs work

github-actions · 2026-04-15T06:35:12Z

📊 Packages dist files size difference

Thanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR.
Please review the changes and make sure they are expected.

File	Before (Size / Gzip)	After (Size / Gzip)
LazyImage
`controller.d.ts`	`395 B` / `257 B`	Removed
`controller.js`	`904 B` / `457 B`	Removed
Map
`abstract_map_controller.d.ts`	`7.6 kB` / `1.49 kB`	`7.29 kB`^{-4% 📉} / `1.46 kB`^{-2% 📉}
`abstract_map_controller.js`	`4.92 kB` / `1.4 kB`	`4.65 kB`^{-5% 📉} / `1.26 kB`^{-10% 📉}
Map (Bridge Google)
`map_controller.d.ts`	`10.56 kB` / `1.92 kB`	`10.26 kB`^{-3% 📉} / `1.9 kB`^{-1% 📉}
`map_controller.js`	`12.9 kB` / `3.19 kB`	`11.25 kB`^{-13% 📉} / `2.84 kB`^{-11% 📉}
Map (Bridge Leaflet)
`map_controller.d.ts`	`9.92 kB` / `1.84 kB`	`9.61 kB`^{-3% 📉} / `1.81 kB`^{-2% 📉}
`map_controller.js`	`12.45 kB` / `3.36 kB`	`11.38 kB`^{-9% 📉} / `3.17 kB`^{-6% 📉}
Svelte
`components.d.ts`	`200 B` / `150 B`	Removed
`components.js`	`46 B` / `69 B`	Removed
`loader.d.ts`	`435 B` / `217 B`	Removed
`loader.js`	`553 B` / `313 B`	Removed
`register_controller.d.ts`	`384 B` / `235 B`	Removed
`register_controller.js`	`531 B` / `303 B`	Removed
`render_controller.d.ts`	`629 B` / `353 B`	Removed
`render_controller.js`	`1.05 kB` / `493 B`	Removed
Swup
`controller.d.ts`	`1012 B` / `360 B`	Removed
`controller.js`	`1.71 kB` / `653 B`	Removed
TogglePassword
`controller.d.ts`	`896 B` / `355 B`	Removed
`controller.js`	`2.64 kB` / `1.07 kB`	Removed
`style.min.css`	`312 B` / `218 B`	Removed
Typed
`controller.d.ts`	`1.9 kB` / `501 B`	Removed
`controller.js`	`1.8 kB` / `638 B`	Removed

Amoifr · 2026-04-15T06:35:31Z

Sorry about this — rebased onto 3.x and moved the CHANGELOG entries into the 3.0.0 section. I'd already been reminded about this on a previous PR and still wasn't careful enough on this batch. Thanks for the patience! 🙏

daFish · 2026-04-16T10:02:50Z

Hey @Amoifr, how is your implementation different than #3232? I think we should avoid duplicate work. 😃

Amoifr · 2026-04-20T07:58:56Z

Main example

Capture.video.du.2026-04-20.09-58-20.mp4

Amoifr · 2026-04-20T08:09:02Z

Basic example

Capture.video.du.2026-04-20.10-08-18.mp4

Amoifr · 2026-04-20T09:13:15Z

Submenu example

Capture.video.du.2026-04-20.11-12-36.mp4

Amoifr · 2026-04-20T09:14:36Z

Shortcuts example

Capture.video.du.2026-04-20.11-13-52.mp4

Amoifr · 2026-04-20T09:17:49Z

With icons example

Capture.video.du.2026-04-20.11-16-54.mp4

Amoifr · 2026-04-20T09:20:06Z

Checkboxes example

Capture.video.du.2026-04-20.11-18-54.mp4

Amoifr · 2026-04-20T09:42:12Z

Checkboxes icons (better than ogiginal)

Capture.video.du.2026-04-20.11-41-11.mp4

Amoifr · 2026-04-20T09:47:35Z

Radio group example :

Capture.video.du.2026-04-20.11-46-33.mp4

Amoifr · 2026-04-20T09:56:22Z

Radio Icons example

Capture.video.du.2026-04-20.11-55-44.mp4

Amoifr · 2026-04-20T09:58:57Z

Desctructive example

Capture.video.du.2026-04-20.11-58-01.mp4

Amoifr · 2026-04-20T10:00:21Z

Avatar example

Capture.video.du.2026-04-20.11-59-52.mp4

Amoifr · 2026-04-20T10:11:12Z

Complex example :

Capture.video.du.2026-04-20.12-10-03.mp4

Amoifr · 2026-04-20T12:06:29Z

RTL example

Capture.video.du.2026-04-20.14-05-27.mp4

…h shadcn reference

Follow up on the review feedback on symfony#3487: the Trigger template should not enforce a specific HTML element but expose a Twig variable with the needed attributes so the consumer can pick their own element (button, link, span...). Since `DropdownMenu` relied on native `<details>`/`<summary>` to handle open/close, replace it with a `<div>` backed by a new `dropdown_menu_controller.js` Stimulus controller handling toggle, outside click and escape. Convert `SubTrigger` to the same convention (drop the hardcoded `<button>`/chevron; consumer now picks the wrapping element and adds the chevron). Migrate `Sub`/`SubContent` from the `peer/peer-hover` pattern to `group/group-hover` so the sub-menu still opens on hover once the peer anchor moves out of the template. Also drop two orphan snapshots (`Demo.html__1.html`, `Usage.html__1.html`) shipped by mistake and no longer generated by the test suite.

Amoifr · 2026-04-23T13:29:35Z

Reworked DropdownMenu (and its SubTrigger) to apply the _trigger_attrs convention (ref review on #3487): swapped native <details>/<summary> for a <div> + a small Stimulus controller, and dropped the hardcoded <button>/chevron on SubTrigger so the consumer now picks the wrapping element. Sidebar is untouched (no trigger). Moving back to draft so you can re-test at your convenience. Thanks for the patience! 🙏

Lacoi · 2026-04-25T21:51:50Z

it would be great, to add the as Prop (like the <twig:Button as="a" href="https://example.com">Link</twig:Button>) to the <twig:Sidebar:MenuButton> component. Without it, you can't render the sidebar menu button as link.

Amoifr · 2026-04-26T06:55:29Z

Hi @Lacoi! Good catch — that's a fair point, sidebar items are very often links rather than buttons, and several other Shadcn components in this PR already expose an as prop (Button, Badge, Item, ButtonGroup/Text). So MenuButton not having one is a bit inconsistent. 🙂

@Kocal @smnandre — would you like me to fold this into the current PR, or keep it focused and address it in a follow-up once this one is in? Happy either way!

Avoid duplicating the radio group `name` on each `DropdownMenu:RadioItem`. The parent `DropdownMenu:RadioGroup` now exposes its `name` to its direct children through a Twig variable; `RadioItem` falls back to it when its own `name` is omitted.

Amoifr requested a review from Kocal as a code owner April 14, 2026 18:10

carsonbot added Feature New Feature Toolkit Status: Needs Review Needs to be reviewed labels Apr 14, 2026

carsonbot added Status: Needs Work Additional work is needed and removed Status: Needs Review Needs to be reviewed labels Apr 14, 2026

Amoifr force-pushed the feat/toolkit-shadcn-dropdown-sidebar branch from 65b4755 to 827749f Compare April 15, 2026 06:34

carsonbot added Status: Needs Review Needs to be reviewed and removed Status: Needs Work Additional work is needed labels Apr 15, 2026

Amoifr changed the base branch from 2.x to 3.x April 15, 2026 06:35

This was referenced Apr 15, 2026

[Toolkit][Shadcn] Add docs pages for 15 new recipes symfony/ux.symfony.com#54

Closed

[Toolkit][Shadcn] Add radio-group, collapsible, typography and toggle-group recipes #3464

Merged

[Toolkit][Shadcn] Add form, sheet and drawer recipes #3473

Draft

This was referenced Apr 18, 2026

[Toolkit][Shadcn] Add docs page for dropdown-menu symfony/ux.symfony.com#71

Open

[Toolkit][Shadcn] Add docs page for sidebar symfony/ux.symfony.com#72

Draft

Amoifr added 2 commits April 20, 2026 09:11

[Toolkit][Shadcn] Add dropdown-menu recipe

9f78219

[Toolkit][Shadcn] Add sidebar recipe

0254927

Amoifr force-pushed the feat/toolkit-shadcn-dropdown-sidebar branch from 827749f to 40ff3bb Compare April 20, 2026 12:21

[Toolkit][Shadcn] Align dropdown-menu examples and sub-components wit…

85838de

…h shadcn reference

Amoifr force-pushed the feat/toolkit-shadcn-dropdown-sidebar branch from 40ff3bb to 85838de Compare April 20, 2026 16:45

[Toolkit][Shadcn] Move CHANGELOG entries to 3.1

3aed608

daFish mentioned this pull request Apr 23, 2026

[Toolkit][Shadcn] Add DropdownMenu component #3232

Open

Amoifr marked this pull request as draft April 23, 2026 13:29

Uh oh!

Conversation

Amoifr commented Apr 14, 2026

Uh oh!

Kocal commented Apr 14, 2026

Uh oh!

github-actions Bot commented Apr 15, 2026

📊 Packages dist files size difference

Uh oh!

Amoifr commented Apr 15, 2026

Uh oh!

daFish commented Apr 16, 2026

Uh oh!

Amoifr commented Apr 20, 2026

Uh oh!

Amoifr commented Apr 20, 2026

Uh oh!

Amoifr commented Apr 20, 2026

Uh oh!

Amoifr commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Amoifr commented Apr 20, 2026

Uh oh!

Amoifr commented Apr 20, 2026

Uh oh!

Amoifr commented Apr 20, 2026

Uh oh!

Amoifr commented Apr 20, 2026

Uh oh!

Amoifr commented Apr 20, 2026

Uh oh!

Amoifr commented Apr 20, 2026

Uh oh!

Amoifr commented Apr 20, 2026

Uh oh!

Amoifr commented Apr 20, 2026

Uh oh!

Amoifr commented Apr 20, 2026

Uh oh!

Amoifr commented Apr 23, 2026

Uh oh!

Lacoi commented Apr 25, 2026

Uh oh!

Amoifr commented Apr 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Amoifr commented Apr 20, 2026 •

edited

Loading