diff --git a/components/tabs/tabs.cjsx b/components/tabs/tabs.cjsx
index fc7a42f1..5dffe0a2 100644
--- a/components/tabs/tabs.cjsx
+++ b/components/tabs/tabs.cjsx
@@ -19,19 +19,19 @@ module.exports = React.createClass
# -- Lifecycle
componentDidMount: ->
- @setState pointer: @pointerPosition @state.index
+ @setState pointer: _pointerPosition @state.index, @refs.navigation.getDOMNode()
componentWillReceiveProps: (next_props) ->
index = next_props.index or @state.index
@setState
index : index
- pointer : @pointerPosition index
+ pointer : _pointerPosition index, @refs.navigation.getDOMNode()
# -- Events
onClick: (index, event, ref) ->
@setState
index : index
- pointer : @pointerPosition index
+ pointer : _pointerPosition index, @refs.navigation.getDOMNode()
@props.onChange? @
# -- Render
@@ -65,11 +65,10 @@ module.exports = React.createClass
{ tabs }
- # -- Private methods
- pointerPosition: (index = 0) ->
- navigation = @refs.navigation.getDOMNode()
- label = navigation.children[index].getBoundingClientRect()
- style =
- top : "#{navigation.getBoundingClientRect().height}px"
- left : "#{label.left}px"
- width : "#{label.width}px"
+# -- Private methods
+_pointerPosition = (index = 0, navigation) ->
+ label = navigation.children[index].getBoundingClientRect()
+ style =
+ top : "#{navigation.getBoundingClientRect().height}px"
+ left : "#{label.left}px"
+ width : "#{label.width}px"
diff --git a/components/tabs/tabs.md b/components/tabs/tabs.md
new file mode 100644
index 00000000..84b1ad16
--- /dev/null
+++ b/components/tabs/tabs.md
@@ -0,0 +1,50 @@
+# Tabs
+
+```javascript
+Tabs = require('../../components/tabs').Tabs
+Tab = require('../../components/tabs').Tab
+
+
+
+ primary
+
+
+ secondary
+
+
+ third
+
+
+ fourth
+
+
+```
+
+
+## Properties
+| Name | Type | Default | Description|
+|:- |:-: | :- |:-|
+| **className** | String | `''` | Additional class name to provide custom styling.|
+| **index** | Number | `0` | Current |
+| **onChange** | Function | | Callback function that is fired when the tab changes.
+
+## Properties
+
+| Name | Type | Default | Description|
+|:- |:-: | :- |:-|
+| **active** | Boolean | `false` | If true, the current component is visible.|
+| **className** | String | `''` | Additional class name to provide custom styling.|
+| **disabled** | Boolean | `false` | If true, the current component is not clickable.|
+| **hidden** | Boolean | `false` | If true, the current component is not visible.|
+| **label** | String | | Label for navigation|
+| **onActive** | Function | | Callback function that is fired when the tab is activated. |
+| **tabIndex** | Number | | Sets the tabindex html attribute.|
+
+## Methods
+
+#### active
+Active/Deactive a determinate instance of the component.
+
+```
+tab_instance.active(true);
+```
diff --git a/spec/components/tabs.cjsx b/spec/components/tabs.cjsx
index aef12ead..3e31a936 100644
--- a/spec/components/tabs.cjsx
+++ b/spec/components/tabs.cjsx
@@ -19,5 +19,8 @@ module.exports = React.createClass
Fourth
+
+ Fifth
+
diff --git a/spec/index.cjsx b/spec/index.cjsx
index 876c4001..4df76792 100644
--- a/spec/index.cjsx
+++ b/spec/index.cjsx
@@ -12,6 +12,7 @@ Form = require './components/form'
Progress = require './components/progress'
Slider = require './components/slider'
Switch = require './components/switch'
+Tabs = require './components/tabs'
Test = React.createClass
@@ -31,6 +32,7 @@ Test = React.createClass
+
React.render , document.body