Skip to content

Menu — Angular

Installation

npm install @fluix-ui/angular @fluix-ui/core @fluix-ui/css

Basic Usage

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"
    >
      <fluix-menu-item menuId="home">Home</fluix-menu-item>
      <fluix-menu-item menuId="features">Features</fluix-menu-item>
      <fluix-menu-item menuId="pricing">Pricing</fluix-menu-item>
    </fluix-menu>
  `,
})
export class AppComponent {}

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

Controlled Usage

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-item menuId="pricing">Pricing</fluix-menu-item>
    </fluix-menu>
  `,
})
export class NavigationComponent {
  active = "home";
}

See Also

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