DropdownMenu

ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>

Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged. Check out the [Composition](https://ariakit.org/guide/composition) guide for more details.

number | undefined = 30

The size of the arrow. Live examples: - [Selection Popover](https://ariakit.org/examples/popover-selection)

MenuStore<MenuStoreValues>

Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not provided, the closest [`Menu`](https://ariakit.org/reference/menu) or [`MenuProvider`](https://ariakit.org/reference/menu-provider) components' context will be used.

WrapElement

Boolean

Indicates whether the element should be focusable even when it is [`disabled`](https://ariakit.org/reference/focusable#disabled). This is important when discoverability is a concern. For example: > A toolbar in an editor contains a set of special smart paste functions that are disabled when the clipboard is empty or when the function is not applicable to the current content of the clipboard. It could be helpful to keep the disabled buttons focusable if the ability to discover their functionality is primarily via their presence on the toolbar. Learn more on [Focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols). Live examples: - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)

Boolean | undefined = false

Determines whether the content element should remain visible even when the [`open`](https://ariakit.org/reference/disclosure-provider#open) state is `false`. If this prop is set to `true`, the `hidden` prop and the `display: none` style will not be applied, unless explicitly set otherwise. This prop is particularly useful when using third-party animation libraries such as Framer Motion or React Spring, where the element needs to be visible for exit animations to work. Live examples: - [Dialog with Framer Motion](https://ariakit.org/examples/dialog-framer-motion) - [Menu with Framer Motion](https://ariakit.org/examples/menu-framer-motion) - [Tooltip with Framer Motion](https://ariakit.org/examples/tooltip-framer-motion) - [Dialog with details & summary](https://ariakit.org/examples/dialog-details)

number | undefined = 4

The minimum padding between the arrow and the popover corner.

Boolean | undefined = false

Automatically focuses the element upon mounting, similar to the native `autoFocus` prop. This addresses an issue where the element with the native `autoFocus` attribute might receive focus before React effects are executed. The `autoFocus` prop can also be used with [Focusable](https://ariakit.org/components/focusable) elements within a [Dialog](https://ariakit.org/components/dialog) component, establishing the initial focus as the dialog opens. **Note**: For this prop to work, the [`focusable`](https://ariakit.org/reference/command#focusable) prop must be set to `true`, if it's not set by default. Live examples: - [Warning on Dialog hide](https://ariakit.org/examples/dialog-hide-warning) - [Dialog with React Router](https://ariakit.org/examples/dialog-react-router) - [Nested Dialog](https://ariakit.org/examples/dialog-nested)

false | true | (arg: HTMLElement) => boolean | undefined = true

Determines whether an element outside of the dialog will be focused when the dialog is hidden if another element hasn't been focused in the action of hiding the dialog (for example, by clicking or tabbing into another tabbable element outside of the dialog). By default, this is usually the disclosure element. The [`finalFocus`](https://ariakit.org/reference/dialog#finalfocus) prop can be used to define a different element to be focused. Live examples: - [Dialog with Next.js App Router](https://ariakit.org/examples/dialog-next-router) - [Sliding menu](https://ariakit.org/examples/menu-slide)

false | true | (arg: HTMLElement) => boolean | undefined = true

Determines whether an element inside the dialog will receive focus when the dialog is shown. By default, this is usually the first tabbable element in the dialog or the dialog itself. The [`initialFocus`](https://ariakit.org/reference/dialog#initialfocus) prop can be used to set a different element to receive focus. Live examples: - [Warning on Dialog hide](https://ariakit.org/examples/dialog-hide-warning) - [Sliding Menu](https://ariakit.org/examples/menu-slide) - [Selection Popover](https://ariakit.org/examples/popover-selection)

false | true | "p" | "abbr" | "address" | "article" | "aside" | "b" | "bdi" | "bdo" | "big" | "caption" | "cite" | "code" | "dd" | "dfn" | "div" | "dt" | "em" | "figcaption" | "figure" | "footer" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "i" | "kbd" | "keygen" | "main" | "mark" | "menu" | "menuitem" | "nav" | "noindex" | "noscript" | "picture" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "small" | "span" | "strong" | "sub" | "summary" | "sup" | "u" | "var" | "wbr" | "webview" | ReactElement<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; }, string | JSXElementConstructor<...>> | ComponentClass<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; }, any> | FunctionComponent<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; }>

Determines whether there will be a backdrop behind the dialog. On modal dialogs, this is `true` by default. Besides a `boolean`, this prop can also be a React component or JSX element that will be rendered as the backdrop. **Note**: If a custom component is used, it must [accept ref and spread all props to its underlying DOM element](https://ariakit.org/guide/composition#custom-components-must-be-open-for-extension), the same way a native element would. Live examples: - [Animated Dialog](https://ariakit.org/examples/dialog-animated) - [Dialog with scrollable backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable) - [Dialog with Framer Motion](https://ariakit.org/examples/dialog-framer-motion) - [Dialog with Menu](https://ariakit.org/examples/dialog-menu) - [Nested Dialog](https://ariakit.org/examples/dialog-nested) - [Dialog with Next.js App Router](https://ariakit.org/examples/dialog-next-router) @example ```jsx <Dialog backdrop={<div className="backdrop" />} /> ```

Boolean | undefined = true

Determines if the component should act as a composite widget. This prop needs to be set to `false` when merging various composite widgets where only one should function in that manner. If disabled, this component will stop managing focus and keyboard navigation for its items and itself. Additionally, composite ARIA attributes won't be applied. These responsibilities should be taken over by another composite component. **Note**: In most cases, this prop doesn't need to be set manually. For example, when composing [Menu with Combobox](https://ariakit.org/examples/menu-combobox) or [Select with Combobox](https://ariakit.org/examples/select-combobox), this prop will be set to `false` automatically on the [`Menu`](https://ariakit.org/reference/menu) and [`SelectPopover`](https://ariakit.org/reference/select-popover) components so the [`Combobox`](https://ariakit.org/reference/combobox) component can take over the composite widget responsibilities. Live examples: - [Menu with Combobox](https://ariakit.org/examples/menu-combobox) - [Select with Combobox](https://ariakit.org/examples/select-combobox)

false | true | (arg: MouseEvent) => boolean | undefined = true

Determines if the pointer events outside of the popover and its anchor element should be disabled during _hover intent_, that is, when the mouse is moving toward the popover. This is required as these external events may trigger focus on other elements and close the popover while the user is attempting to hover over it. This can be either a boolean or a callback receiving the mouse event happening during hover intent. The callback should return a boolean.

Boolean | undefined = false

Determines if the element is disabled. This sets the `aria-disabled` attribute accordingly, enabling support for all elements, including those that don't support the native `disabled` attribute. This feature can be combined with the [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled) prop to make disabled elements still accessible via keyboard. **Note**: For this prop to work, the [`focusable`](https://ariakit.org/reference/command#focusable) prop must be set to `true`, if it's not set by default. Live examples: - [Submenu](https://ariakit.org/examples/menu-nested) - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs) - [Context Menu](https://ariakit.org/examples/menu-context-menu)

HTMLElement | RefObject<HTMLElement>

Determines the element that will receive focus once the dialog is closed, provided that no other element has been focused while the dialog was being hidden (e.g., by clicking or tabbing into another tabbable element outside of the dialog). - If [`autoFocusOnHide`](https://ariakit.org/reference/dialog#autofocusonhide) is set to `false`, this prop will have no effect. - If left unset, the element that was focused before the dialog was opened will be focused again.

Boolean | undefined = false

Whether the popover should fit the viewport. If this is set to true, the popover wrapper will have `maxWidth` and `maxHeight` set to the viewport size. This will be exposed to CSS as [`--popover-available-width`](https://ariakit.org/guide/styling#--popover-available-width) and [`--popover-available-height`](https://ariakit.org/guide/styling#--popover-available-height). Live examples: - [Textarea with inline Combobox](https://ariakit.org/examples/combobox-textarea) - [Menubar](https://ariakit.org/components/menubar)

Boolean | undefined = false

Whether the popover has `position: fixed` or not.

string | false | true | undefined = true

Controls the behavior of the popover when it overflows the viewport: - If a `boolean`, specifies whether the popover should flip to the opposite side when it overflows. - If a `string`, indicates the preferred fallback placements when it overflows. The placements must be spaced-delimited, e.g. "top left". Live examples: - [Sliding Menu](https://ariakit.org/examples/menu-slide) - [Menubar](https://ariakit.org/components/menubar)

Boolean | undefined = true

Determines if the active composite item should receive focus (or virtual focus if the [`virtualFocus`](https://ariakit.org/reference/composite-provider#virtualfocus) option is enabled) when moving through items. This typically happens when navigating through items with arrow keys, but it can also happen when calling the [`move`](https://ariakit.org/reference/use-composite-store#move) method directly. Unlike the [`composite`](https://ariakit.org/reference/composite#composite-1) prop, this option doesn't disable the entire composite widget behavior. It only stops this component from managing focus when navigating through items. **Note**: If you want to control the behavior only _when arrow keys are pressed_, use the [`moveOnKeyPress`](https://ariakit.org/reference/composite#moveonkeypress) prop instead.

Boolean

Determines if [Focusable](https://ariakit.org/components/focusable) features should be active on non-native focusable elements. **Note**: This prop only turns off the additional features provided by the [`Focusable`](https://ariakit.org/reference/focusable) component. Non-native focusable elements will lose their focusability entirely. However, native focusable elements will retain their inherent focusability, but without added features such as improved [`autoFocus`](https://ariakit.org/reference/focusable#autofocus), [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled), [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible), etc. @see https://ariakit.org/reference/focusable

(anchor: HTMLElement) => AnchorRect

Function that returns the anchor element's DOMRect. If this is explicitly passed, it will override the anchor `getBoundingClientRect` method. Live examples: - [Textarea with inline combobox](https://ariakit.org/examples/combobox-textarea) - [Standalone Popover](https://ariakit.org/examples/popover-standalone) - [Context menu](https://ariakit.org/examples/menu-context-menu) - [Selection Popover](https://ariakit.org/examples/popover-selection)

() => Iterable<Element>

When a dialog is open, the elements outside of it are disabled to prevent interaction if the dialog is [`modal`](https://ariakit.org/reference/dialog#modal). For non-modal dialogs, interacting with elements outside the dialog prompts it to close. This function allows you to return an iterable collection of elements that will be considered as part of the dialog, thus excluding them from this behavior. **Note**: The elements returned by this function must exist in the DOM when the dialog opens. Live examples: - [Dialog with React-Toastify](https://ariakit.org/examples/dialog-react-toastify)

string | number | undefined = xs

default 4px (space.xs)

false | true | (arg: KeyboardEvent | React.KeyboardEvent<Element>) => boolean | undefined = true

Determines if the dialog will hide when the user presses the Escape key. This prop can be either a boolean or a function that accepts an event as an argument and returns a boolean. The event object represents the keydown event that initiated the hide action, which could be either a native keyboard event or a React synthetic event. **Note**: When placing Ariakit dialogs inside third-party dialogs, using `event.stopPropagation()` within this function will stop the event from reaching the third-party dialog, closing only the Ariakit dialog.

false | true | (arg: MouseEvent) => boolean | undefined = true

Determines whether the popover should hide when the mouse leaves the popover or the anchor element and there's no _hover intent_, meaning, the mouse isn't moving toward the popover. This can be either a boolean or a callback receiving the mouse move event that initiated the behavior. The callback should return a boolean. **Note**: This behavior won't be triggered when the popover or any of its descendants are in focus.

false | true | (arg: Event | SyntheticEvent<Element, Event>) => boolean | undefined = true

Determines if the dialog should hide when the user clicks or focuses on an element outside the dialog. This prop can be either a boolean or a function that takes an event as an argument and returns a boolean. The event object represents the event that triggered the action, which could be a native event or a React synthetic event of various types. Live examples: - [Selection Popover](https://ariakit.org/examples/popover-selection)

HTMLElement | RefObject<HTMLElement>

Specifies the element that will receive focus when the dialog is first opened. It can be an `HTMLElement` or a `React.RefObject` with an `HTMLElement`. If [`autoFocusOnShow`](https://ariakit.org/reference/dialog#autofocusonshow) is set to `false`, this prop will have no effect. If left unset, the dialog will attempt to determine the initial focus element in the following order: 1. A [Focusable](https://ariakit.org/components/focusable) element with an [`autoFocus`](https://ariakit.org/reference/focusable#autofocus) prop. 2. The first tabbable element inside the dialog. 3. The first focusable element inside the dialog. 4. The dialog element itself.

WuiProps | undefined = {}

add custom props from styled system on DropdownMenu inner

Boolean | undefined = false

Determines whether the dialog is modal. Modal dialogs have distinct states and behaviors: - The [`portal`](https://ariakit.org/reference/dialog#portal) and [`preventBodyScroll`](https://ariakit.org/reference/dialog#preventbodyscroll) props are set to `true`. They can still be manually set to `false`. - When using the [`Heading`](https://ariakit.org/reference/heading) or [`DialogHeading`](https://ariakit.org/reference/dialog-heading) components within the dialog, their level will be reset so they start with `h1`. - A visually hidden dismiss button will be rendered if the [`DialogDismiss`](https://ariakit.org/reference/dialog-dismiss) component hasn't been used. This allows screen reader users to close the dialog. - When the dialog is open, element tree outside it will be inert. Live examples: - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs) - [Dialog with details & summary](https://ariakit.org/examples/dialog-details) - [Form with Select](https://ariakit.org/examples/form-select) - [Context menu](https://ariakit.org/examples/menu-context-menu) - [Responsive Popover](https://ariakit.org/examples/popover-responsive)

false | true | (arg: KeyboardEvent<HTMLElement>) => boolean | undefined = true

Determines whether the composite widget should move focus to an item when arrow keys are pressed, given that the composite element is focused and there's no active item. **Note**: To entirely disable focus moving within a composite widget, you can use the [`focusOnMove`](https://ariakit.org/reference/composite#focusonmove) prop instead. If you want to control the behavior _only when arrow keys are pressed_, where [`focusOnMove`](https://ariakit.org/reference/composite#focusonmove) may not be applicable, this prop must be set on composite items as well. @example ```jsx <Composite moveOnKeyPress={false}> <CompositeItem moveOnKeyPress={false} /> <CompositeItem moveOnKeyPress={false} /> </Composite> ```

(event: Event) => void

This is an event handler prop triggered when the dialog's `close` event is dispatched. The `close` event is similar to the native dialog [`close`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event) event. The only difference is that this event can be canceled with `event.preventDefault()`, which will prevent the dialog from hiding. It's important to note that this event only fires when the dialog store's [`open`](https://ariakit.org/reference/use-dialog-store#open) state is set to `false`. If the controlled [`open`](https://ariakit.org/reference/dialog#open) prop value changes, or if the dialog's visibility is altered in any other way (such as unmounting the dialog without adjusting the open state), this event won't be triggered. Live examples: - [Dialog with scrollable backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable) - [Dialog with details & summary](https://ariakit.org/examples/dialog-details) - [Warning on Dialog hide](https://ariakit.org/examples/dialog-hide-warning) - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)

BivariantCallback<(event: SyntheticEvent<HTMLElement, Event>) => void>

Custom event handler invoked when the element gains focus through keyboard interaction or a key press occurs while the element is in focus. This is the programmatic equivalent of the [`data-focus-visible`](https://ariakit.org/guide/styling#data-focus-visible) attribute. **Note**: For this prop to work, the [`focusable`](https://ariakit.org/reference/command#focusable) prop must be set to `true`, if it's not set by default. Live examples: - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation) - [Custom Checkbox](https://ariakit.org/examples/checkbox-custom)

Boolean

Controls the open state of the dialog. This is similar to the [`open`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/open) attribute on native dialog elements. Live examples: - [Dialog with scrollable backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable) - [Dialog with details & summary](https://ariakit.org/examples/dialog-details) - [Warning on Dialog hide](https://ariakit.org/examples/dialog-hide-warning) - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)

number | undefined = 8

The minimum padding between the popover and the viewport edge. This will be exposed to CSS as [`--popover-overflow-padding`](https://ariakit.org/guide/styling#--popover-overflow-padding). Live examples: - [Sliding Menu](https://ariakit.org/examples/menu-slide)

Boolean | undefined = false

Whether the popover can overlap the anchor element when it overflows. Live examples: - [Menubar](https://ariakit.org/components/menubar) - [Submenu with Combobox](https://ariakit.org/examples/menu-nested-combobox)

Boolean | undefined = true

Determines whether the element should be rendered as a React Portal. Live examples: - [Combobox with integrated filter](https://ariakit.org/examples/combobox-filtering-integrated) - [Dialog with Menu](https://ariakit.org/examples/dialog-menu) - [Hovercard with keyboard support](https://ariakit.org/examples/hovercard-disclosure) - [Menubar](https://ariakit.org/components/menubar) - [Standalone Popover](https://ariakit.org/examples/popover-standalone) - [Animated Select](https://ariakit.org/examples/select-animated)

HTMLElement | (element: HTMLElement) => HTMLElement

An HTML element or a memoized callback function that returns an HTML element to be used as the portal element. By default, the portal element will be a `div` element appended to the `document.body`. Live examples: - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation) @example ```jsx const [portal, setPortal] = useState(null); <Portal portalElement={portal} /> <div ref={setPortal} /> ``` @example ```jsx const getPortalElement = useCallback(() => { const div = document.createElement("div"); const portalRoot = document.getElementById("portal-root"); portalRoot.appendChild(div); return div; }, []); <Portal portalElement={getPortalElement} /> ```

RefCallback<HTMLElement> | MutableRefObject<HTMLElement>

`portalRef` is similar to `ref` but is scoped to the portal node. It's useful when you need to be informed when the portal element is appended to the DOM or removed from the DOM. Live examples: - [Form with Select](https://ariakit.org/examples/form-select) @example ```jsx const [portalElement, setPortalElement] = useState(null); <Portal portalRef={setPortalElement} /> ```

Boolean | undefined = false

When enabled, `preserveTabOrder` will keep the DOM element's tab order the same as the order in which the underlying [`Portal`](https://ariakit.org/reference/portal) component was mounted in the React tree. If the [`preserveTabOrderAnchor`](https://ariakit.org/reference/portal#preservetaborderanchor) prop is provided, the tab order will be preserved relative to that element.

Element

An anchor element for maintaining the tab order when [`preserveTabOrder`](https://ariakit.org/reference/portal#preservetaborder) prop is enabled. The tab order will be kept relative to this element. By default, the tab order is kept relative to the original location in the React tree where the underlying [`Portal`](https://ariakit.org/reference/portal) component was mounted. @example ```jsx {18-20} const [anchor, setAnchor] = useState(null); <button ref={setAnchor}>Order 0</button> <button>Order 2</button> // Rendered at the end of the document. <Portal> <button>Order 5</button> </Portal> // Rendered at the end of the document, but the tab order is preserved. <Portal preserveTabOrder> <button>Order 3</button> </Portal> // Rendered at the end of the document, but the tab order is preserved // relative to the anchor element. <Portal preserveTabOrder preserveTabOrderAnchor={anchor}> <button>Order 1</button> </Portal> <button>Order 4</button> ```

Boolean

Determines whether the body scrolling will be prevented when the dialog is shown. This is automatically set to `true` when the dialog is [`modal`](https://ariakit.org/reference/dialog#modal). You can disable this prop if you want to implement your own logic.

ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>

Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged. Check out the [Composition](https://ariakit.org/guide/composition) guide for more details.

Boolean | undefined = false

Whether the popover should have the same width as the anchor element. This will be exposed to CSS as [`--popover-anchor-width`](https://ariakit.org/guide/styling#--popover-anchor-width).

number | undefined = 0

The skidding of the popover along the anchor element. Can be set to negative values to make the popover shift to the opposite side. Live examples: - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs) - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation) - [Submenu](https://ariakit.org/examples/menu-nested) - [Menubar](https://ariakit.org/components/menubar)

Boolean | undefined = true

Whether the popover should slide when it overflows.

MenuStore<MenuStoreValues>

Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not provided, the closest [`MenuProvider`](https://ariakit.org/reference/menu-provider) component's context will be used.

Boolean | undefined = true

When enabled, pressing printable character keys will move focus to the next composite item that starts with the entered characters.

Boolean | undefined = false

When set to `true`, the content element will be unmounted and removed from the DOM when it's hidden. Live examples: - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation) - [Combobox with integrated filter](https://ariakit.org/examples/combobox-filtering-integrated) - [Textarea with inline Combobox](https://ariakit.org/examples/combobox-textarea) - [Standalone Popover](https://ariakit.org/examples/popover-standalone) - [Animated Select](https://ariakit.org/examples/select-animated) - [Multi-Select](https://ariakit.org/examples/select-multiple)

(props: { updatePosition: () => Promise<void>; }) => void | Promise<void>

A callback that will be called when the popover needs to calculate its position. This will override the internal `updatePosition` function. The original `updatePosition` function will be passed as an argument, so it can be called inside the callback to apply the default behavior. Live examples: - [Responsive Popover](https://ariakit.org/examples/popover-responsive)

WrapElement

HTMLAttributes<HTMLDivElement>

Props that will be passed to the popover wrapper element. This element will be used to position the popover. Live examples: - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation) - [Sliding Menu](https://ariakit.org/examples/menu-slide)

Boolean

Indicates whether the element should be focusable even when it is [`disabled`](https://ariakit.org/reference/focusable#disabled). This is important when discoverability is a concern. For example: > A toolbar in an editor contains a set of special smart paste functions that are disabled when the clipboard is empty or when the function is not applicable to the current content of the clipboard. It could be helpful to keep the disabled buttons focusable if the ability to discover their functionality is primarily via their presence on the toolbar. Learn more on [Focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols). Live examples: - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)

Boolean | undefined = false

Automatically focuses the element upon mounting, similar to the native `autoFocus` prop. This addresses an issue where the element with the native `autoFocus` attribute might receive focus before React effects are executed. The `autoFocus` prop can also be used with [Focusable](https://ariakit.org/components/focusable) elements within a [Dialog](https://ariakit.org/components/dialog) component, establishing the initial focus as the dialog opens. **Note**: For this prop to work, the [`focusable`](https://ariakit.org/reference/command#focusable) prop must be set to `true`, if it's not set by default. Live examples: - [Warning on Dialog hide](https://ariakit.org/examples/dialog-hide-warning) - [Dialog with React Router](https://ariakit.org/examples/dialog-react-router) - [Nested Dialog](https://ariakit.org/examples/dialog-nested)

false | true | (arg: MouseEvent<HTMLElement, MouseEvent>) => boolean

Determines if the composite item should lose focus when the mouse leaves. By default, this is set to `true` if [`focusOnHover`](https://ariakit.org/reference/composite-hover#focusonhover) is `true`. Live examples: - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation) - [Combobox with integrated filter](https://ariakit.org/examples/combobox-filtering-integrated) - [Submenu with Combobox](https://ariakit.org/examples/menu-nested-combobox) - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs) - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)

Boolean | undefined = true

If set to `true`, pressing the enter key while this element is focused will trigger a click on the element, regardless of whether it's a native button or not. If this prop is set to `false`, pressing enter will not initiate a click.

Boolean | undefined = true

If set to `true`, pressing and releasing the space key while this element is focused will trigger a click on the element, regardless of whether it's a native button or not. If this prop is set to `false`, space will not initiate a click.

Boolean | undefined = false

Determines if the element is disabled. This sets the `aria-disabled` attribute accordingly, enabling support for all elements, including those that don't support the native `disabled` attribute. This feature can be combined with the [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled) prop to make disabled elements still accessible via keyboard. **Note**: For this prop to work, the [`focusable`](https://ariakit.org/reference/command#focusable) prop must be set to `true`, if it's not set by default. Live examples: - [Submenu](https://ariakit.org/examples/menu-nested) - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs) - [Context Menu](https://ariakit.org/examples/menu-context-menu)

false | true | (arg: MouseEvent<HTMLElement, MouseEvent>) => boolean | undefined = true

Determines if the composite item should be _focused_ when hovered over. Note that the actual DOM focus will stay on the composite element. This item will get the [`data-active-item`](https://ariakit.org/guide/styling#data-active-item) attribute so it can be styled as if it's focused. Live examples: - [Multi-selectable Combobox](https://ariakit.org/examples/combobox-multiple) - [Combobox with integrated filter](https://ariakit.org/examples/combobox-filtering-integrated) - [Textarea with inline Combobox](https://ariakit.org/examples/combobox-textarea) - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation) - [Submenu with Combobox](https://ariakit.org/examples/menu-nested-combobox) - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)

Boolean | undefined = true

Determines if [Focusable](https://ariakit.org/components/focusable) features should be active on non-native focusable elements. **Note**: This prop only turns off the additional features provided by the [`Focusable`](https://ariakit.org/reference/focusable) component. Non-native focusable elements will lose their focusability entirely. However, native focusable elements will retain their inherent focusability, but without added features such as improved [`autoFocus`](https://ariakit.org/reference/focusable#autofocus), [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled), [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible), etc.

(props: CollectionStoreItem) => CollectionStoreItem

A memoized function that returns props to be passed with the item during its registration in the store. @example ```jsx const getItem = useCallback((data) => ({ ...data, custom: true }), []); <CollectionItem getItem={getItem} /> ```

false | true | (arg: MouseEvent<HTMLElement, MouseEvent>) => boolean | undefined = true

Determines if the menu should hide when this item is clicked. **Note**: This behavior isn't triggered if this menu item is rendered as a link and modifier keys are used to either open the link in a new tab or download it. Live examples: - [Sliding Menu](https://ariakit.org/examples/menu-slide)

string

The unique ID of the item. This will be used to register the item in the store and for the element's `id` attribute. If not provided, a unique ID will be automatically generated. Live examples: - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs) - [Tab with React Router](https://ariakit.org/examples/tab-react-router) - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)

false | true | (arg: KeyboardEvent<HTMLElement>) => boolean | undefined = true

Determines if pressing arrow keys while this item is in focus should move focus to a different item. **Note**: To entirely disable focus moving within a composite widget, you can use the [`focusOnMove`](https://ariakit.org/reference/composite#focusonmove) prop on the composite component instead. If you want to control the behavior _only when arrow keys are pressed_, where [`focusOnMove`](https://ariakit.org/reference/composite#focusonmove) may not be applicable, this prop must be set on all composite items because they each manage their own key presses, as well as on the composite component itself. @example ```jsx <Composite moveOnKeyPress={false}> <CompositeItem moveOnKeyPress={false} /> <CompositeItem moveOnKeyPress={false} /> </Composite> ```

BivariantCallback<(event: SyntheticEvent<HTMLElement, Event>) => void>

Custom event handler invoked when the element gains focus through keyboard interaction or a key press occurs while the element is in focus. This is the programmatic equivalent of the [`data-focus-visible`](https://ariakit.org/guide/styling#data-focus-visible) attribute. **Note**: For this prop to work, the [`focusable`](https://ariakit.org/reference/command#focusable) prop must be set to `true`, if it's not set by default. Live examples: - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation) - [Custom Checkbox](https://ariakit.org/examples/checkbox-custom)

false | true | (arg: KeyboardEvent<HTMLElement>) => boolean | undefined = false

Whether the scroll behavior should be prevented when pressing arrow keys on the first or the last items. @deprecated Use CSS [`scroll-margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin) instead.

ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>

Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged. Check out the [Composition](https://ariakit.org/guide/composition) guide for more details.

string

The id that will be used to group items in the same row. This is usually retrieved by the [`CompositeRow`](https://ariakit.org/reference/composite-row) component through context so in most cases you don't need to set it manually.

Boolean

Determines if the item should be registered as part of the collection. If this is set to `false`, the item won't be accessible via arrow keys.

MenubarStore | MenuStore<MenuStoreValues>

Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) or [`useMenubarStore`](https://ariakit.org/reference/use-menubar-store) hooks. If not provided, the closest [`Menu`](https://ariakit.org/reference/menu), [`MenuProvider`](https://ariakit.org/reference/menu-provider), [`Menubar`](https://ariakit.org/reference/menubar), or [`MenubarProvider`](https://ariakit.org/reference/menubar-provider) components' context will be used.

Boolean

When the `tabbable` prop is set to `true`, the [roving tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex) method is partially disabled for this element. This means that the `tabIndex` prop won't be assigned `-1` when the item is inactive. In addition to using arrow keys, users will be able to tab to this element, leading to the composite widget no longer existing as a single tab stop. As per the [ARIA spec](https://w3c.github.io/aria/#composite): > Authors **SHOULD** ensure that a composite widget exists as a single > navigation stop within the larger navigation system of the web page. Additionally, as stated in [RFC-2119](https://www.rfc-editor.org/rfc/rfc2119.txt): > **SHOULD** This word, or the adjective "RECOMMENDED", mean that there may > exist valid reasons in particular circumstances to ignore a particular > item, but the full implications must be understood and carefully weighed > before choosing a different course. Therefore, while this may be allowed, you should think carefully about the implications of using this prop. **Note**: This prop has no effect when the [`virtualFocus`](https://ariakit.org/reference/composite-provider#virtualfocus) option is enabled. Live examples: - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)

WrapElement

"horizontal" | "vertical"

The orientation of the separator. By default, this is the opposite of the [`orientation`](https://ariakit.org/reference/composite-provider#orientation) state of the composite widget. Which means it doesn't need to be explicitly set in most cases.

ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>

Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged. Check out the [Composition](https://ariakit.org/guide/composition) guide for more details.

MenuStore<MenuStoreValues>

Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not provided, the closest [`Menu`](https://ariakit.org/reference/menu) or [`MenuProvider`](https://ariakit.org/reference/menu-provider) components' context will be used.

WrapElement

number | false | true

Determines whether the content should animate when it is shown or hidden. - If `true`, the `animating` state will be `true` when the content is shown or hidden and it will wait for a CSS animation/transition to end before becoming `false`. - If it's set to a number, the `animating` state will be `true` when the content is shown or hidden and it will wait for the number of milliseconds to pass before becoming `false`. @deprecated Manually setting the `animated` prop is no longer necessary. This will be removed in a future release.

ComboboxStore<ComboboxStoreSelectedValue>

A reference to a [combobox store](https://ariakit.org/reference/use-combobox-store). It's automatically set when composing [Menu with Combobox](https://ariakit.org/examples/menu-combobox).

string

The composite item id that should be active by default when the composite widget is rendered. If `null`, the composite element itself will have focus and users will be able to navigate to it using arrow keys. If `undefined`, the first enabled item will be focused.

CompositeStoreItem[] | undefined = []

The defaut value for the [`items`](https://ariakit.org/reference/collection-provider#items) state.

Boolean | undefined = false

Whether the content should be visible by default.

MenuStoreValues | undefined = {}

The default values for the [`values`](https://ariakit.org/reference/menu-provider#values) state. Live examples: - [MenuItemCheckbox](https://ariakit.org/examples/menu-item-checkbox) - [MenuItemRadio](https://ariakit.org/examples/menu-item-radio)

DisclosureStore

A reference to another disclosure store that controls another disclosure component to keep them in sync. Element states like `contentElement` and `disclosureElement` won't be synced. For that, use the [`store`](https://ariakit.org/reference/disclosure-provider#store) prop instead. Live examples: - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)

MenubarStore

A reference to a [menubar store](https://ariakit.org/reference/use-menubar-store). It's automatically set when rendering menus inside a [`Menubar`](https://ariakit.org/reference/menubar) in the React tree. Live examples: - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)

MenuStore<MenuStoreValues>

A reference to a parent menu store. It's automatically set when nesting menus in the React tree. You should manually set this if menus aren't nested in the React tree. Live examples: - [Menubar](https://ariakit.org/components/menubar) - [Submenu](https://ariakit.org/examples/menu-nested) - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)

PopoverStore

A reference to another popover store that's controlling another popover to keep them in sync.

(activeId: string) => void

A callback that gets called when the [`activeId`](https://ariakit.org/reference/composite-provider#activeid) state changes.

BivariantCallback<(items: CompositeStoreItem[]) => void>

A callback that gets called when the [`items`](https://ariakit.org/reference/collection-provider#items) state changes. @example const [items, setItems] = useState([]); const collection = useCollectionStore({ items, setItems });

(mounted: boolean) => void

A callback that gets called when the `mounted` state changes. @example const [mounted, setMounted] = useState(false); const disclosure = useDisclosureStore({ setMounted });

(open: boolean) => void

A callback that gets called when the [`open`](https://ariakit.org/reference/disclosure-provider#open) state changes. @example const [open, setOpen] = useState(false); const disclosure = useDisclosureStore({ open, setOpen });

BivariantCallback<(values: MenuStoreValues) => void>

A callback that gets called when the [`values`](https://ariakit.org/reference/menu-provider#values) state changes. Live examples: - [MenuItemCheckbox](https://ariakit.org/examples/menu-item-checkbox) - [Submenu with Combobox](https://ariakit.org/examples/menu-nested-combobox)