Arrow
render
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.
size
number | undefined = 30
The size of the arrow. Live examples: - [Selection Popover](https://ariakit.org/examples/popover-selection)
store
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
WrapElement
DropdownMenu
Item
accessibleWhenDisabled
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)
autoFocus
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)
blurOnHoverEnd
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)
clickOnEnter
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.
clickOnSpace
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.
disabled
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)
focusOnHover
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)
focusable
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.
getItem
(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} /> ```
hideOnClick
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)
id
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)
moveOnKeyPress
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> ```
onFocusVisible
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)
preventScrollOnKeyDown
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.
render
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.
rowId
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.
shouldRegisterItem
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.
store
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.
tabbable
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
WrapElement
Separator
orientation
"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.
render
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.
store
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
WrapElement