Menu — API Reference

Component Architecture

The Menu is a compound component with three parts:

Part	Description
`Menu.Root`	Container that manages layout, state, and theming
`Menu.Indicator`	Animated background that morphs between active items using spring physics and SVG gooey effect. Rendered automatically inside `Menu.Root` — you usually don’t need to include it manually.
`Menu.Item`	Individual interactive navigation item

Menu.Root Props

Prop	Type	Default	Description
`orientation`	`MenuOrientation`	`"horizontal"`	Layout direction of the menu items
`variant`	`MenuVariant`	`"pill"`	Visual style of the active indicator
`theme`	`MenuTheme`	`"dark"`	Color theme
`activeId`	`string \| null`	—	Controlled active item ID. Use with `onActiveChange` for controlled state.
`defaultActiveId`	`string \| null`	—	Initial active item for uncontrolled usage
`onActiveChange`	`(id: string) => void`	—	Callback when the active item changes (React/Svelte). Vue uses `@active-change`, Angular uses `(activeChange)`.
`spring`	`SpringConfig`	core default	Spring physics configuration for the indicator animation
`roundness`	`number`	—	Border radius factor for the indicator
`blur`	`number`	—	Gooey blur amount for the indicator
`fill`	`string`	—	Color override applied to the menu background and the active indicator. Prefer this over manually styling `Menu.Indicator`.
`className`	`string`	—	Custom CSS class for the root element

Menu.Item Props

Prop	Type	Default	Description
`id`	`string`	required	Unique identifier for this item. Used to track the active state.
`disabled`	`boolean`	`false`	Disables interaction and dims the item
`className`	`string`	—	Custom CSS class
`onClick`	`MouseEventHandler`	—	Click handler (in addition to the active state change)
`children`	`ReactNode`	required	Label content rendered inside the item

Menu.Indicator Props

Prop	Type	Default	Description
`fill`	`string`	—	Override the indicator background color
`blur`	`number`	—	Override the gooey blur amount
`className`	`string`	—	Custom CSS class

React

import { Menu } from "@fluix-ui/react";
import "@fluix-ui/css";

function App() {
  const [active, setActive] = useState("home");

  return (
    <Menu.Root
      orientation="horizontal"
      variant="pill"
      theme="dark"
      activeId={active}
      onActiveChange={setActive}
    >
      <Menu.Item id="home">Home</Menu.Item>
      <Menu.Item id="features">Features</Menu.Item>
    </Menu.Root>
  );
}

Uses compound components. State change callback via onActiveChange prop.

Vue

<script setup>
import { ref } from "vue";
import { Menu } from "@fluix-ui/vue";
import "@fluix-ui/css";

const active = ref("home");
</script>

<template>
  <Menu.Root
    orientation="horizontal"
    variant="pill"
    theme="dark"
    :activeId="active"
    @active-change="active = $event"
  >
    <Menu.Item id="home">Home</Menu.Item>
    <Menu.Item id="features">Features</Menu.Item>
  </Menu.Root>
</template>

Vue Events

Event	Payload	Description
`@active-change`	`string`	Emitted when the active item changes

Svelte

<script>
  import { Menu } from "@fluix-ui/svelte";
  import "@fluix-ui/css";

  let active = $state("home");
</script>

<Menu.Root
  orientation="horizontal"
  variant="pill"
  theme="dark"
  activeId={active}
  onActiveChange={(id) => active = id}
>
  <Menu.Item id="home">Home</Menu.Item>
  <Menu.Item id="features">Features</Menu.Item>
</Menu.Root>

Uses Svelte 5 runes ($state). State change callback via onActiveChange prop.

Angular

import { Component } from "@angular/core";
import { FluixMenuComponent } from "@fluix-ui/angular";
import "@fluix-ui/css";

@Component({
  standalone: true,
  imports: [FluixMenuComponent],
  template: `
    <fluix-menu
      orientation="horizontal"
      variant="pill"
      theme="dark"
      [activeId]="active"
      (activeChange)="active = $event"
    >
      <fluix-menu-item menuId="home">Home</fluix-menu-item>
      <fluix-menu-item menuId="features">Features</fluix-menu-item>
    </fluix-menu>
  `,
})
export class AppComponent {
  active = "home";
}

Angular Inputs / Outputs

Name	Type	Description
`orientation`	`"vertical" \| "horizontal"`	Layout direction
`variant`	`"pill" \| "tab"`	Visual style
`theme`	`MenuTheme`	Color theme
`activeId`	`string \| null`	Controlled active item
`spring`	`SpringConfig`	Physics config
`roundness`	`number`	Border radius factor
`blur`	`number`	Indicator blur
`fill`	`string`	Background override
`activeChange`	`EventEmitter<string>`	Active item change event

Vanilla JS

The Vanilla adapter uses a factory function instead of components.

`createMenu(host, options)`

Parameter	Type	Description
`host`	`HTMLElement`	DOM element to mount the menu into
`options`	`MenuOptions`	Configuration object (see below)

MenuOptions

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

Instance Methods

Method	Signature	Description
`setActive`	`(id: string) => void`	Programmatically set the active item
`getActive`	`() => string \| null`	Get the current active item ID
`update`	`(options: Partial<MenuOptions>) => void`	Update menu configuration
`destroy`	`() => void`	Remove the menu and clean up event listeners

Vanilla Example

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);
  },
});

// Programmatic control
menu.setActive("analytics");

// Cleanup
menu.destroy();

Types

MenuOrientation

type MenuOrientation = "horizontal" | "vertical";

MenuVariant

type MenuVariant = "pill" | "tab";

pill — Rounded background indicator that slides behind the active item.
tab — Underline-style indicator below (horizontal) or beside (vertical) the active item.

MenuTheme

type MenuTheme = "dark" | "light" | string;

Accepts "dark", "light", or any custom string. Custom strings map to CSS attribute selectors — see Theming.

SpringConfig

interface SpringConfig {
  stiffness?: number;
  damping?: number;
  mass?: number;
}

Controls the spring physics of the indicator animation. Higher stiffness makes it snappier, higher damping reduces oscillation, higher mass makes it heavier/slower.

CSS Variables

Override these on [data-fluix-menu] to customize the appearance:

Variable	Default	Description
`--fluix-menu-bg`	`#1a1a2e`	Menu container background
`--fluix-menu-color`	`#a0a0b0`	Inactive item text color
`--fluix-menu-active-color`	`#ffffff`	Active item text color
`--fluix-menu-indicator`	`rgba(255, 255, 255, 0.1)`	Indicator fill color

[data-fluix-menu] {
  --fluix-menu-bg: #0f172a;
  --fluix-menu-color: #94a3b8;
  --fluix-menu-active-color: #f1f5f9;
  --fluix-menu-indicator: rgba(99, 102, 241, 0.2);
}

Accessibility

Each Menu.Item renders a button element with appropriate focus management.
Keyboard navigation with arrow keys moves focus between items.
The active indicator is purely decorative and hidden from assistive technology.
Disabled items are skipped during keyboard navigation.