Skip to main content

Documentation Index

Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt

Use this file to discover all available pages before exploring further.

Menu tokens control the appearance of the Menu component in its content, item, and arrow variants.

​
Tokens

​
How to override

Use ThemeProvider to override component tokens for a subtree: 
import { ThemeProvider } from "@servicetitan/anvil2";

<ThemeProvider
  theme={{
    component: {
      MenuContentForegroundColor: {
        value: "#ff0055",
        extensions: { appearance: { dark: { value: "#ff6688" } } },
      },
    },
  }}
>
  {/* children */}
</ThemeProvider>;
The -hover, -active, and -disabled variants of any token can be overridden the same way. To theme every component at once, override tier-2 semantic tokens instead — see Design Tokens.

​
Interactive states

Interactive state tokens follow a -hover / -active / -disabled suffix on the base token name. For example, menu.primary.background.color has siblings menu.primary.background.color-hover, ...color-active, and ...color-disabled. The table above surfaces these via the State column.
Last modified on May 4, 2026