Menu

1. Live Preview

vanilla live preview activates on the client; source HTML keeps a readable preview island and primitive contract.

2. Installation

Install adapter-specific dependencies first, then complete setup via the installation guide. installation docs

pnpm add @nake-ui/primitives @nake-ui/adapter-vanilla @nake-ui/theme-vanilla

3. Usage

Minimal runnable usage for the current adapter.

import "@nake-ui/theme-vanilla/styles.css";
import { bindMenu } from "@nake-ui/adapter-vanilla";

const binding = bindMenu(nodes, items, options);
binding.destroy();

4. Examples

Hover

Use `openOnHover` for stable hover opening while sharing the same Floating positioner behavior as React.

import "@nake-ui/theme-vanilla/styles.css";
import { bindMenu } from "@nake-ui/adapter-vanilla";

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindMenu(
    {
      trigger,
      positioner,
      content,
      items: { open: itemOpen, share: itemShare, delete: itemDelete }
    },
    [
      { id: "open", textValue: "Open" },
      { id: "share", textValue: "Share" },
      { id: "delete", textValue: "Delete" }
    ],
    { id: "example-hover-menu", defaultOpen: false, openOnHover: true, matchAnchorWidth: false }
  );

  // cleanup on unmount
  binding.destroy();
}

trigger.textContent = "Hover me";

Nested

Compose parent and submenu bindings so nested actions open on the right with an arrow cue, aligned with the React demo.

import "@nake-ui/theme-vanilla/styles.css";
import { bindMenu } from "@nake-ui/adapter-vanilla";

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const rootBinding = bindMenu(
    {
      root: rootMenu,
      trigger: rootTrigger,
      positioner: rootPositioner,
      content: rootContent,
      items: { rename: itemRename, duplicate: itemDuplicate }
    },
    [
      { id: "rename", textValue: "Rename" },
      { id: "duplicate", textValue: "Duplicate" }
    ],
    {
      id: "example-menu-root",
      defaultOpen: false,
      matchAnchorWidth: false
    }
  );

  const submenuBinding = bindMenu(
    {
      root: themeRoot,
      trigger: themeTrigger,
      positioner: themePositioner,
      content: themeContent,
      items: { 'theme-light': itemThemeLight, 'theme-dark': itemThemeDark }
    },
    [
      { id: "theme-light", textValue: "Light" },
      { id: "theme-dark", textValue: "Dark" }
    ],
    {
      id: "example-submenu",
      defaultOpen: false,
      openOnHover: true,
      placement: "right-start",
      offset: 8,
      matchAnchorWidth: false
    }
  );

  // cleanup on unmount
  rootBinding.destroy();
  submenuBinding.destroy();
}

5. RTL

The same structure running inside a `dir="rtl"` container.