Adaptive Menu

Responsive menu that becomes a drawer on small viewports. Compose trigger + popup + items.

Copyimport { AdaptiveMenu } from "@coss/ui/shared/adaptive-menu";

When to use AdaptiveMenu

Use AdaptiveMenu when the same trigger and the same item list appear on every viewport. Only the surface changes: a dropdown Menu on desktop becomes a bottom Drawer on mobile. The user always opens one control and sees the same actions.

When not to use AdaptiveMenu

Do not use AdaptiveMenu when actions are asymmetric across breakpoints:

• Desktop exposes some actions outside the menu — inline toolbar buttons, row actions, or other controls — and mobile folds those into the overflow drawer.
• The item count or content differs by breakpoint (for example, mobile adds Share or moves preview/copy into the drawer while desktop keeps them as icon buttons).

AdaptiveMenu assumes one shared list of items. It cannot represent "toolbar on desktop, everything in the drawer on mobile."

What to use instead

Compose Menu and Drawer / DrawerMenu separately, and show each with responsive visibility (hidden md:flex, md:hidden, and similar). Desktop keeps inline actions plus a menu for the rest; mobile uses a single drawer that includes the toolbar actions.

See apps/web/modules/event-types/views/event-types-listing-view.tsx: preview, copy, and publish controls render inline on max-md:hidden desktop rows, while md:hidden mobile rows use a Drawer whose DrawerMenu absorbs those actions plus the overflow items.

Example

Composition matches a real product call site. Copy is paraphrased.

Choose AdaptiveMenuPopup align to match where the trigger sits in the layout; the example omits it so the default positioning applies.

Call sites

Example URLs

Not exhaustive — a few places you can open locally (e.g. http://localhost:3000) to see this in product.

Source

packages/coss-ui/src/shared/adaptive-menu.tsx