Skip to content


Creates a single tab stop whose items are navigated by arrow keys, which provides list navigation outside of floating element contexts.

import {Composite, CompositeItem} from '@floating-ui/react';

This is useful to enable navigation of a list of items that aren’t part of a floating element. A menubar is an example of a composite, with each reference element being an item.


  <CompositeItem>Item 1</CompositeItem>
  <CompositeItem>Item 2</CompositeItem>
  <CompositeItem>Item 3</CompositeItem>

The render prop can be used to customize the rendering of the composite components. Both Composite and CompositeItem accept a JSX element:

<CompositeItem render={<select />}>
  <option />
  <option />

Or a function that returns an element to customize how the HTML props are spread/passed:

  render={(htmlProps) => (
    <select {...htmlProps}>
      <option />
      <option />


interface CompositeProps {
  render?: RenderProp;
  orientation?: 'horizontal' | 'vertical' | 'both';
  loop?: boolean;
  cols?: number;
  disabledIndices?: number[];
  activeIndex?: number;
  onNavigate?(index: number): void;
  itemSizes?: Dimensions[];
  dense?: boolean;


default: <div />

Determines the element to render.

<Composite render={<button />} />


default: 'both'

Determines the orientation of the composite.

<Composite orientation="horizontal" />


default: true

Determines whether the composite should loop around when navigating past the first or last item.

<Composite loop={false} />


default: 1

Determines the number of columns there are in the composite (i.e. it’s a grid).

<Composite cols={3} />


Determines which items are disabled. The disabled or aria-disabled attributes are used by default.

<Composite disabledIndices={[1]} />


default: undefined

Determines which item is active. Used to externally control the active item.

const [activeIndex, setActiveIndex] = useState(0);
return <Composite activeIndex={activeIndex} />;


default: undefined

Called when the user navigates to a new item. Used to externally control the active item.

const [activeIndex, setActiveIndex] = useState(0);
return <Composite onNavigate={setActiveIndex} />;


default: undefined

Only for grid navigation, an array of Dimensions objects, which specify the width (number of columns) and height (number of rows) of each item, so the navigation algorithm can take the variable sizes into account. If not specified, every item will be treated as if it has a size of 1 row and 1 column.

    {width: 2, height: 2},
    {width: 1, height: 3},


default: false

Only for grid navigation, determines if the grid positioning algorithm should follow CSS Grid’s auto-flow dense algorithm.

<Composite dense />