GlideMenu

A wrapper that draws one shared hover highlight and glides it between the interactive rows inside it.

When to use

• Give any vertical list of rows (a menu, a list of options, sidebar items) the gliding hover layer used across the AI primitives.
• Build a custom menu that should feel the same as SearchList, SidebarNav, ApprovalCard and the FineTuneCard Type menu, which all use it.
• Not a complete menu with a trigger, positioning and keyboard roving — use DropdownMenu, ContextMenu or CommandPalette.

Usage

import GlideMenu from "@/components/iris/glide-menu/glide-menu";

h(
  "div",
  { className: "menu" },
  h(
    GlideMenu,
    { className: "menu-list" },
    h("button", { "data-menu-row": true, className: "menu-row" }, "Rename document"),
    h("button", { "data-menu-row": true, className: "menu-row" }, "Move to project"),
    h("button", { "data-menu-row": true, className: "menu-row" }, "Delete"),
  ),
);
// .menu-row { position: relative; z-index: 1; }  — rows must sit above the highlight

Props

Prop	Type	Default	Description
children	ReactNode	—	The rows. Every row that should catch the highlight needs the attribute named by rowSelector.
className	string	""	Classes on the relative wrapper, for layout such as a flex column with a gap.
highlightClassName	string	"inset-x-0 rounded-[8px] bg-hover"	Classes for the absolutely positioned highlight layer. Set its horizontal extent, radius and background.
rowSelector	string	"[data-menu-row]"	CSS selector that identifies a row.

Notes

• The highlight follows mouseover and keyboard focus (focusin), and fades out on mouse leave or when focus leaves the group. It does not add keyboard navigation of its own, so rows should be real buttons or links.
• Give rows position: relative and a z-index above the highlight, and avoid opaque row backgrounds. Otherwise the layer is hidden.
• The highlight animates top and height over 220ms. The bundle's global reduced-motion rule shortens this to near zero.
• The default highlight reads --hover. Pass your own class (for example one using --accent-tint) for an emphasised list.