Skip to content

Menu — Vue

Installation

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

Basic Usage

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

<template>
  <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>
</template>

Props (Menu.Root)

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)
`spring`	`SpringConfig`	core default	Spring animation config
`roundness`	`number`	—	Border radius factor
`blur`	`number`	—	Indicator blur amount
`fill`	`string`	—	Background color override

Events

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

Controlled Usage

<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.Item id="pricing">Pricing</Menu.Item>
  </Menu.Root>
</template>

Tab Variant

<template>
  <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>
</template>

See Also

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