# NavigableContainers

`NavigableContainer` is a React component to render a container navigable using the keyboard. Only things that are focusable can be navigated to. It will currently always be a `div`.

`NavigableContainer` is exported as two classes: `NavigableMenu` and `TabbableContainer`. `NavigableContainer` itself is **not** exported. `NavigableMenu` and `TabbableContainer` have the props listed below. Any other props will be passed through to the `div`.

----

## Props

These are the props that `NavigableMenu` and `TabbableContainer`. Any props which are specific to one class are labelled appropriately.

### onNavigate

A callback invoked when the menu navigates to one of its children passing the index and child as an argument

- Type: `Function`
- Required: No

### cycle

A boolean which tells the component whether or not to cycle from the end back to the beginning and vice versa.

- Type: `Boolean`
- Required: No
- default: true

### orientation (NavigableMenu only)

The orientation of the menu. It could be "vertical", "horizontal" or "both"

- Type: `String`
- Required: No
- Default: `"vertical"`

## Classes

### NavigableMenu

A NavigableMenu allows movement up and down (or left and right) the component via the arrow keys. The `tab` key is not handled. The `orientation` prop is used to determine whether the arrow keys used are vertical, horizontal or both.

### TabbableContainer

A `TabbableContainer` will only be navigated using the `tab` key. Every intended tabstop must have a tabIndex `0`.

### Usage

```jsx
import { NavigableMenu, TabbableContainer, Button } from '@wordpress/components';

function onNavigate( index, target ) {
	console.log( `Navigates to ${ index }`, target );
}

const MyNavigableContainer = () => (
	<div>
		<span>Navigable Menu:</span>
		<NavigableMenu onNavigate={ onNavigate } orientation="horizontal">
			<Button isDefault>Item 1</Button>
			<Button isDefault>Item 2</Button>
			<Button isDefault>Item 3</Button>
		</NavigableMenu>
		
		<span>Tabbable Container:</span>
		<TabbableContainer onNavigate={ onNavigate }>
			<Button isDefault tabIndex="0">Section 1</Button>
			<Button isDefault tabIndex="0">Section 2</Button>
			<Button isDefault tabIndex="0">Section 3</Button>
			<Button isDefault tabIndex="0">Section 4</Button>
		</TabbableContainer>
	</div>
);
```
