Circle V2 API Docs
    Preparing search index...

    Interface MenuRootProps

    interface MenuRootProps {
        anchorPoint?: Point | null;
        "aria-label"?: string;
        children: ReactNode;
        closeOnSelect?: boolean;
        composite?: boolean;
        defaultHighlightedValue?: string | null;
        defaultOpen?: boolean;
        highlightedValue?: string | null;
        id?: string;
        ids?: Partial<
            {
                arrow: string;
                content: string;
                contextTrigger: string;
                group: (id: string) => string;
                groupLabel: (id: string) => string;
                positioner: string;
                trigger: string;
            },
        >;
        immediate?: boolean;
        lazyMount?: boolean;
        loopFocus?: boolean;
        navigate?: ((details: NavigateDetails) => void)
        | null;
        onEscapeKeyDown?: (event: KeyboardEvent) => void;
        onExitComplete?: VoidFunction;
        onFocusOutside?: (event: Combobox.FocusOutsideEvent) => void;
        onHighlightChange?: (details: HighlightChangeDetails) => void;
        onInteractOutside?: (event: Combobox.InteractOutsideEvent) => void;
        onOpenChange?: (details: OpenChangeDetails) => void;
        onPointerDownOutside?: (event: Combobox.PointerDownOutsideEvent) => void;
        onRequestDismiss?: (event: LayerDismissEvent) => void;
        onSelect?: (details: SelectionDetails) => void;
        open?: boolean;
        positioning?: PositioningOptions;
        present?: boolean;
        recipe?: SlotRecipeDefinition<string, SlotRecipeVariantRecord<string>>;
        size?: ConditionalValue<"sm" | "md" | undefined>;
        skipAnimationOnMount?: boolean;
        typeahead?: boolean;
        unmountOnExit?: boolean;
        unstyled?: boolean;
        variant?: ConditionalValue<"solid" | "subtle" | undefined>;
    }

    Hierarchy

    • MenuRootBaseProps
      • MenuRootProps
    Index

    Properties

    anchorPoint? aria-label? children closeOnSelect? composite? defaultHighlightedValue? defaultOpen? highlightedValue? id? ids? immediate? lazyMount? loopFocus? navigate? onEscapeKeyDown? onExitComplete? onFocusOutside? onHighlightChange? onInteractOutside? onOpenChange? onPointerDownOutside? onRequestDismiss? onSelect? open? positioning? present? recipe? size? skipAnimationOnMount? typeahead? unmountOnExit? unstyled? variant?

    Properties

    anchorPoint?: Point | null

    The positioning point for the menu. Can be set by the context menu trigger or the button trigger.

    "aria-label"?: string

    The accessibility label for the menu

    children: ReactNode
    closeOnSelect?: boolean

    Whether to close the menu when an option is selected

    true
    composite?: boolean

    Whether the menu is a composed with other composite widgets like a combobox or tabs

    true
    defaultHighlightedValue?: string | null

    The initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.

    defaultOpen?: boolean

    The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.

    highlightedValue?: string | null

    The controlled highlighted value of the menu item.

    id?: string

    The unique identifier of the machine.

    ids?: Partial<
        {
            arrow: string;
            content: string;
            contextTrigger: string;
            group: (id: string) => string;
            groupLabel: (id: string) => string;
            positioner: string;
            trigger: string;
        },
    >

    The ids of the elements in the menu. Useful for composition.

    immediate?: boolean

    Whether to synchronize the present change immediately or defer it to the next frame

    lazyMount?: boolean

    Whether to enable lazy mounting

    false
    loopFocus?: boolean

    Whether to loop the keyboard navigation.

    false
    navigate?: ((details: NavigateDetails) => void) | null

    Function to navigate to the selected item if it's an anchor element

    onEscapeKeyDown?: (event: KeyboardEvent) => void

    Function called when the escape key is pressed

    onExitComplete?: VoidFunction

    Function called when the animation ends in the closed state

    onFocusOutside?: (event: Combobox.FocusOutsideEvent) => void

    Function called when the focus is moved outside the component

    onHighlightChange?: (details: HighlightChangeDetails) => void

    Function called when the highlighted menu item changes.

    onInteractOutside?: (event: Combobox.InteractOutsideEvent) => void

    Function called when an interaction happens outside the component

    onOpenChange?: (details: OpenChangeDetails) => void

    Function called when the menu opens or closes

    onPointerDownOutside?: (event: Combobox.PointerDownOutsideEvent) => void

    Function called when the pointer is pressed down outside the component

    onRequestDismiss?: (event: LayerDismissEvent) => void

    Function called when this layer is closed due to a parent layer being closed

    onSelect?: (details: SelectionDetails) => void

    Function called when a menu item is selected.

    open?: boolean

    The controlled open state of the menu

    positioning?: PositioningOptions

    The options used to dynamically position the menu

    present?: boolean

    Whether the node is present (controlled by the user)

    recipe?: SlotRecipeDefinition<string, SlotRecipeVariantRecord<string>>
    size?: ConditionalValue<"sm" | "md" | undefined>
    "md"
    skipAnimationOnMount?: boolean

    Whether to allow the initial presence animation.

    false
    typeahead?: boolean

    Whether the pressing printable characters should trigger typeahead navigation

    true
    unmountOnExit?: boolean

    Whether to unmount on exit.

    false
    unstyled?: boolean

    If true, the element will opt out of the theme styles.

    variant?: ConditionalValue<"solid" | "subtle" | undefined>
    "subtle"

    Settings

    Member Visibility

    On This Page

    Properties