# 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

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

```js
<Composite>
  <CompositeItem>Item 1</CompositeItem>
  <CompositeItem>Item 2</CompositeItem>
  <CompositeItem>Item 3</CompositeItem>
</Composite>
```

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

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

<Notice type="error" title="Important">
  When rendering custom components, they must be **open for
  extension**. This means they must [forward the ref to the
  underlying DOM
  node](https://react.dev/reference/react/forwardRef), and they
  must spread all props passed into the component onto the node.
</Notice>

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

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

## Props

```js
interface Props {
  render?: RenderProp;
  orientation?: 'horizontal' | 'vertical' | 'both';
  loop?: boolean;
  cols?: number;
  disabledIndices?: number[];
  activeIndex?: number;
  onNavigate?(index: number): void;
}
```

### render

default: `<div />{:js}`

Determines the element to render.

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

### orientation

default: `'both'{:js}`

Determines the orientation of the composite.

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

### loop

default: `true{:js}`

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

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

### cols

default: `1{:js}`

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

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

### disabledIndices

Determines which items are disabled. The `disabled{:.keyword}` or
`aria-disabled{:.keyword}` attributes are used by default.

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

### activeIndex

default: `undefined{:js}`

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

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

### onNavigate

default: `undefined{:js}`

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

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