Skip to content

Menu — Vanilla JS

Installation

npm install @fluix-ui/vanilla @fluix-ui/css

Basic Usage

import { createMenu } from "@fluix-ui/vanilla";
import "@fluix-ui/css";

const host = document.getElementById("menu-host");

if (host) {
  const menu = createMenu(host, {
    orientation: "horizontal",
    variant: "pill",
    theme: "dark",
    items: [
      { id: "home", label: "Home" },
      { id: "features", label: "Features" },
      { id: "pricing", label: "Pricing" },
    ],
  });
}

Option	Type	Description
`orientation`	`"vertical" \| "horizontal"`	Layout direction
`variant`	`"pill" \| "tab"`	Visual style
`theme`	`MenuTheme`	Color theme
`items`	`Array<{ id: string; label: string; disabled?: boolean }>`	Menu items
`activeId`	`string \| null`	Initial active item
`spring`	`SpringConfig`	Physics config
`roundness`	`number`	Border radius factor
`blur`	`number`	Indicator blur
`fill`	`string`	Background override
`onActiveChange`	`(id: string) => void`	Active change callback

setActive(id) — programmatically set the active item
getActive() — get the current active item ID
update(partialOptions) — update menu options
destroy() — remove the menu and clean up

Example with Callback

import { createMenu } from "@fluix-ui/vanilla";
import "@fluix-ui/css";

const menu = createMenu(document.getElementById("nav"), {
  orientation: "horizontal",
  variant: "tab",
  theme: "dark",
  items: [
    { id: "overview", label: "Overview" },
    { id: "analytics", label: "Analytics" },
    { id: "settings", label: "Settings" },
  ],
  onActiveChange: (id) => {
    console.log("Active tab:", id);
    // Navigate or update content
  },
});

// Later: programmatic control
menu.setActive("analytics");

See Also

Menu Overview — Features and variants
Theming — Custom CSS themes
Architecture — How the shared core works