Animations

Glide Menu

Pronew

A menu whose submenus open in place, gliding in with a blur.

Installation

npx shadcn@latest add @blank-pro/glide-menu

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import {
  GlideMenu,
  GlideMenuContent,
  GlideMenuTrigger,
  type GlideMenuItem,
} from "@/components/ui/glide-menu"

const items: GlideMenuItem[] = [
  {
    id: "move",
    label: "Move to",
    searchPlaceholder: "Find a space",
    items: [{ id: "roadmap", label: "Roadmap" }],
  },
  { id: "archive", label: "Archive", onSelect: archive },
]

<GlideMenu>
  <GlideMenuTrigger asChild>
    <Button variant="outline">Board actions</Button>
  </GlideMenuTrigger>
  <GlideMenuContent label="Board actions" items={items} />
</GlideMenu>

Reach for it over DropdownMenu when a menu is deep and space is tight: submenus replace the panel instead of flying out beside it, so nothing runs off the screen on a phone. The menu is data, not children — each row can carry its own items, and searchPlaceholder adds a filter to the panel it opens.

Up and Down move, Right or Enter go in, Left or Escape come back out, and Escape at the top closes. Enter in a filter picks the first match.

Props

GlideMenuContent takes the popover content props, plus:

Prop	Type	Default
`items`	`GlideMenuItem[]`	—
`label`	`string`	—
`onItemSelect`	`(item, path) => void`	—
`emptyMessage`	`ReactNode`	`"No matches"`

A GlideMenuItem has id, label, and optionally icon, shortcut, variant, disabled, onSelect, items and searchPlaceholder.