Skip to content
Fluix

Menu - Overview

The Menu component is available since Fluix 0.0.9 and provides an animated navigation menu with a gooey active-indicator that morphs between items using spring physics.

Install

Section titled “Install”
Terminal window
npm install @fluix-ui/react @fluix-ui/css

Use your adapter package (@fluix-ui/vue, @fluix-ui/svelte, @fluix-ui/angular, or @fluix-ui/vanilla) the same way as Toast.

React

Section titled “React”
import { Menu } from "@fluix-ui/react";
import "@fluix-ui/css";


export function DemoMenu() {
  return (
    <Menu.Root orientation="horizontal" variant="pill" theme="dark">
      <Menu.Indicator />
      <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>
  );
}

Key Features

Section titled “Key Features”
  • Gooey indicator - The active indicator morphs between items with a spring-based SVG gooey effect.
  • Two variants - "pill" (rounded background) and "tab" (underline style).
  • Two orientations - "horizontal" and "vertical" layouts.
  • Controlled or uncontrolled - Use defaultActiveId for uncontrolled or activeId + onActiveChange for controlled state.
  • Spring physics - Customize the spring animation with stiffness, damping, and mass.

Variants

Section titled “Variants”
// Pill variant (default) - rounded background indicator
<Menu.Root variant="pill">...</Menu.Root>


// Tab variant - underline style indicator
<Menu.Root variant="tab">...</Menu.Root>

Orientations

Section titled “Orientations”
// Horizontal (default)
<Menu.Root orientation="horizontal">...</Menu.Root>


// Vertical
<Menu.Root orientation="vertical">...</Menu.Root>

Framework Guides

Section titled “Framework Guides”

API Reference

Section titled “API Reference”

See the full Menu API Reference for all props, types, CSS variables, and accessibility details.

Section titled “Related”