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.
Implementation
Custom Trigger Props
TriggerReturnProps
Common Examples
import { Menu } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<Menu label="Click me!">
<Menu.Item label="Item 1" />
<Menu.Item label="Item 2" />
<Menu.Item label="Item 3" />
</Menu>
);
}
Menu and Menu.Item components can be used to compose basic dropdown menus.To create nested dropdown menus, simply add a Menu as a child of another Menu.To use a custom trigger element, use the trigger prop of the Menu, and omit the label prop (and any other prop meant to be passed to the default Button trigger).React Accessibility
When using a custom trigger, make sure that the trigger:
- Can receive focus via keyboard when tabbing.
- Opens the menu when the user presses enter.
- Closes the menu and returns focus to the trigger when the user presses escape.
For more guidance on accessible menu interactions, see keyboard navigation and focus management best practices.<Menu
trigger={(props) => <CustomButton {...props}>Custom Trigger</CustomButton>}
open={false}
disableAutoHeight={false}
>
<Menu.Item label="Item 1" />
<Menu.Item label="Item 2" />
</Menu>
trigger prop to render a custom trigger, the following props are available:This will stop the menu from automatically deciding which way to open based on
the trigger’s location on the screen.
trigger
(TriggerReturnProps) => ReactElement
<Menu
trigger={(props) => (
<button
{...props}
aria-controls={props["aria-controls"]}
aria-expanded={props["aria-expanded"]}
aria-haspopup={props["aria-haspopup"]}
onClick={props.onClick}
>
Custom Trigger
</button>
)}
>
<Menu.Item label="Item 1" />
</Menu>
TriggerReturnProps
The following props are passed as an object parameter in the custom trigger callback function when using the trigger prop. The function should return a ReactElement which should have the TriggerReturnProps passed to (see Creating custom menu triggers).Identifies the element (or elements) whose contents or presence are controlled
by the current element.
Indicates whether the element, or another grouping element it controls, is
currently expanded or collapsed.
Indicates the availability and type of interactive popup element, such as menu
or dialog, that can be triggered by an element.
