react-toolbox/components/navigation
Javi Velasco 0cb8d8bdb2 Get rid of jsx extensions 🔮 2016-04-10 21:23:04 +02:00
..
Navigation.js Get rid of jsx extensions 🔮 2016-04-10 21:23:04 +02:00
_config.scss Better styles for navigation. Fixes #205 2015-12-11 18:53:37 +01:00
index.js Remove jsx extension from imports in components 2015-11-28 20:24:46 +01:00
readme.md Updated Navigation Readme. Aligned properties and added quotes around horizontal and vertical for type description. 2016-03-25 12:13:23 -04:00
style.scss Use sass lint 2016-04-10 12:20:59 +02:00

readme.md

Navigation

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.

import Navigation from 'react-toolbox/lib/navigation';
import Link from 'react-toolbox/lib/link';

const actions = [
  { label: 'Alarm', raised: true, icon: 'access_alarm'},
  { label: 'Location', raised: true, accent: true, icon: 'room'}
];

const NavigationTest = () => (
  <div>
    <Navigation type='horizontal' actions={actions} />
    <Navigation type='vertical'>
      <Link href='http://' label='Inbox' icon='inbox' />
      <Link href='http://' active label='Profile' icon='person' />
    </Navigation>
  </div>
);

Properties

Name Type Default Description
actions Array Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
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.