Skip to content

Menu — Svelte

Installation

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

Basic Usage

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

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

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)
`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

Controlled Usage

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

See Also

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