Skip to content

Menu — React

Installation

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

Basic Usage

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

function App() {
  return (
    <Menu.Root orientation="horizontal" variant="pill" theme="dark">
      <Menu.Item id="home">Home</Menu.Item>
      <Menu.Item id="features">Features</Menu.Item>
      <Menu.Item id="pricing">Pricing</Menu.Item>
    </Menu.Root>
  );
}

The Menu is a compound component with three parts: Menu.Root (container), Menu.Item (interactive items), and Menu.Indicator (animated active background).

Menu.Root

<Menu.Root
  orientation="horizontal"
  variant="pill"
  theme="dark"
  defaultActiveId="home"
  spring={{ stiffness: 300, damping: 25, mass: 1 }}
  roundness={12}
  blur={8}
  fill="#1a1a2e"
>
  <Menu.Item id="home">Home</Menu.Item>
</Menu.Root>

Props

Prop	Type	Default	Description
`orientation`	`"vertical" \| "horizontal"`	`"horizontal"`	Layout direction
`variant`	`"pill" \| "tab"`	`"pill"`	Visual style of the indicator
`theme`	`MenuTheme`	`"dark"`	Color theme
`activeId`	`string \| null`	—	Controlled active item ID
`defaultActiveId`	`string \| null`	—	Initial active item (uncontrolled)
`onActiveChange`	`(id: string) => void`	—	Called when active item changes
`spring`	`SpringConfig`	core default	Spring animation config
`roundness`	`number`	—	Border radius factor
`blur`	`number`	—	Indicator blur amount
`fill`	`string`	—	Background color override
`className`	`string`	—	Custom class for the root element

Menu.Item

<Menu.Item id="home" disabled={false} onClick={() => console.log("clicked")}>
  Home
</Menu.Item>

Props

Prop	Type	Default	Description
`id`	`string`	required	Unique identifier for this item
`disabled`	`boolean`	`false`	Disable interaction
`className`	`string`	—	Custom class
`onClick`	`MouseEventHandler`	—	Click handler
`children`	`ReactNode`	required	Item label content

Menu.Indicator

<Menu.Indicator fill="#3b82f6" blur={10} />

Props

Prop	Type	Default	Description
`fill`	`string`	—	Indicator color override
`blur`	`number`	—	Blur amount override
`className`	`string`	—	Custom class

Controlled Usage

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

function Navigation() {
  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.Item id="pricing">Pricing</Menu.Item>
      <Menu.Item id="docs">Docs</Menu.Item>
    </Menu.Root>
  );
}

Tab Variant

<Menu.Root variant="tab" orientation="horizontal" theme="dark">
  <Menu.Item id="overview">Overview</Menu.Item>
  <Menu.Item id="analytics">Analytics</Menu.Item>
  <Menu.Item id="settings">Settings</Menu.Item>
</Menu.Root>

Vertical Layout

<Menu.Root orientation="vertical" variant="pill" theme="dark">
  <Menu.Item id="dashboard">Dashboard</Menu.Item>
  <Menu.Item id="projects">Projects</Menu.Item>
  <Menu.Item id="team">Team</Menu.Item>
  <Menu.Item id="settings">Settings</Menu.Item>
</Menu.Root>

CSS Customization

Override the Menu CSS variables to customize the appearance:

[data-fluix-menu] {
  --fluix-menu-bg: #1a1a2e;
  --fluix-menu-color: #a0a0b0;
  --fluix-menu-active-color: #ffffff;
  --fluix-menu-indicator: rgba(255, 255, 255, 0.1);
}

See Also

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