Skip to content

Composite

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

A menubar is an example of a composite.

Usage

import {Composite, CompositeItem} from '@floating-ui/react';
import {Composite, CompositeItem} from '@floating-ui/react';
<Composite>
  <CompositeItem>Item 1</CompositeItem>
  <CompositeItem>Item 2</CompositeItem>
  <CompositeItem>Item 3</CompositeItem>
</Composite>
<Composite>
  <CompositeItem>Item 1</CompositeItem>
  <CompositeItem>Item 2</CompositeItem>
  <CompositeItem>Item 3</CompositeItem>
</Composite>

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

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

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

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

Props

interface Props {
  render?: RenderProp;
  orientation?: 'horizontal' | 'vertical' | 'both';
  loop?: boolean;
  cols?: number;
  disabledIndices?: number[];
}
interface Props {
  render?: RenderProp;
  orientation?: 'horizontal' | 'vertical' | 'both';
  loop?: boolean;
  cols?: number;
  disabledIndices?: number[];
}

render

default: <div /><div />

Determines the element to render.

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

orientation

default: 'both''both'

Determines the orientation of the composite.

<Composite orientation="horizontal" />
<Composite orientation="horizontal" />

loop

default: truetrue

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

<Composite loop={false} />
<Composite loop={false} />

cols

default: 11

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

<Composite cols={3} />
<Composite cols={3} />

disabledIndices

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

<Composite disabledIndices={[1]} />
<Composite disabledIndices={[1]} />