2015-07-06 13:53:37 +03:00
# Navigation
2015-11-01 14:39:49 +03:00
This component is intended to be a common wrapper for a group of links or buttons. It sets a minimal layout, semantic markup and spacing for each of those elements.
<!-- example -->
```jsx
2015-11-10 13:07:43 +03:00
import Navigation from 'react-toolbox/lib/navigation';
2015-12-11 20:53:37 +03:00
import Link from 'react-toolbox/lib/link';
2015-11-01 14:39:49 +03:00
const actions = [
2015-12-11 20:53:37 +03:00
{ label: 'Alarm', raised: true, icon: 'access_alarm'},
2015-11-17 23:49:27 +03:00
{ label: 'Location', raised: true, accent: true, icon: 'room'}
2015-07-06 13:53:37 +03:00
];
2015-11-01 14:39:49 +03:00
const NavigationTest = () => (
< div >
< Navigation type = 'horizontal' actions = {actions} / >
2015-12-11 20:53:37 +03:00
< Navigation type = 'vertical' >
< Link href = 'http://' label = 'Inbox' icon = 'inbox' / >
< Link href = 'http://' active label = 'Profile' icon = 'person' / >
< / Navigation >
2015-11-01 14:39:49 +03:00
< / div >
);
2015-07-06 13:53:37 +03:00
```
## Properties
| Name | Type | Default | Description|
2015-11-01 14:39:49 +03:00
|:-----|:-----|:-----|:-----|
| `actions` | `Array` | | Array of objects that represent buttons so the keys will be transferred as properties to those.|
| `className` | `String` | | Set a custom class styles to style the navigation.|
| `routes` | `Array` | | Array of objects similar to actions but that will be rendered as `<Link/>` component definition. |
| `type` | `String` | `horizontal` | Type of the navigation, it can be vertical or horizontal.|