diff --git a/docs/api/caption.md b/docs/api/caption.md
new file mode 100644
index 00000000..534e13ab
--- /dev/null
+++ b/docs/api/caption.md
@@ -0,0 +1,19 @@
+---
+id: caption
+title: Caption
+sidebar_label: Caption
+---
+
+The chart's caption, which will render below the chart.
+
+[ Highcharts caption reference](https://api.highcharts.com/highcharts/caption)
+
+## Usage
+
+```jsx
+<HighchartsChart>
+  <Caption align="center">
+    This is center aligned caption.
+  </Caption>
+</HighchartsChart>
+```
diff --git a/docs/api/mapnavigation.md b/docs/api/mapnavigation.md
new file mode 100644
index 00000000..c137c2d7
--- /dev/null
+++ b/docs/api/mapnavigation.md
@@ -0,0 +1,18 @@
+---
+id: map-navigation
+title: MapNavigation
+sidebar_label: MapNavigation
+---
+
+[ Highmaps mapnavigation reference](https://api.highcharts.com/highmaps/mapNavigation)
+
+## Usage
+
+```jsx
+<HighchartsMapChart map={data}>
+  <MapNavigation>
+    <MapNavigation.ZoomIn />
+    <MapNavigation.ZoomOut />
+  </MapNavigation>
+</HighchartsMapChart>
+```
diff --git a/docs/api/navigator.md b/docs/api/navigator.md
new file mode 100644
index 00000000..d49de041
--- /dev/null
+++ b/docs/api/navigator.md
@@ -0,0 +1,36 @@
+---
+id: navigator
+title: Navigator
+sidebar_label: Navigator
+---
+
+The navigator is a small series below the main series, displaying a view of the entire data set. It provides tools to zoom in and out on parts of the data as well as panning across the dataset.
+
+[ Highstock navigator reference](https://api.highcharts.com/highstock/navigator)
+
+## Usage
+
+```jsx
+<HighchartsStockChart>
+  <Chart zoomType="x" />
+
+  <XAxis>
+    <XAxis.Title>Time</XAxis.Title>
+  </XAxis>
+
+  <YAxis>
+    <YAxis.Title>Price</YAxis.Title>
+    <AreaSplineSeries id="profit" name="Profit" data={data1} />
+  </YAxis>
+
+  <YAxis opposite>
+    <YAxis.Title>Social Buzz</YAxis.Title>
+    <SplineSeries id="twitter" name="Twitter mentions" data={data2} />
+  </YAxis>
+
+  <Navigator>
+    <Navigator.Series seriesId="profit" />
+    <Navigator.Series seriesId="twitter" />
+  </Navigator>
+</HighchartsStockChart>
+```
diff --git a/docs/getting-started/react-jsx-highcharts.md b/docs/getting-started/react-jsx-highcharts.md
new file mode 100755
index 00000000..54c4f4c6
--- /dev/null
+++ b/docs/getting-started/react-jsx-highcharts.md
@@ -0,0 +1,13 @@
+---
+id: react-jsx-highcharts
+title: Getting Started
+sidebar_label: react-jsx-highcharts
+---
+
+## Installation
+
+`npm install --save react-jsx-highcharts`
+
+You'll need the peer dependencies too
+
+`npm install --save react react-dom prop-types highcharts@^7.0.0`
diff --git a/docs/getting-started/react-jsx-highmaps.md b/docs/getting-started/react-jsx-highmaps.md
new file mode 100644
index 00000000..8ca38f3a
--- /dev/null
+++ b/docs/getting-started/react-jsx-highmaps.md
@@ -0,0 +1,13 @@
+---
+id: react-jsx-highmaps
+title: Getting Started
+sidebar_label: react-jsx-highmaps
+---
+
+## Installation
+
+`npm install --save react-jsx-highmaps`
+
+You'll need the peer dependencies too
+
+`npm install --save react react-dom prop-types highcharts@^7.0.0`
diff --git a/docs/getting-started/react-jsx-highstock.md b/docs/getting-started/react-jsx-highstock.md
new file mode 100644
index 00000000..7782e674
--- /dev/null
+++ b/docs/getting-started/react-jsx-highstock.md
@@ -0,0 +1,13 @@
+---
+id: react-jsx-highstock
+title: Getting Started
+sidebar_label: react-jsx-highstock
+---
+
+## Installation
+
+`npm install --save react-jsx-highstock`
+
+You'll need the peer dependencies too
+
+`npm install --save react react-dom prop-types highcharts@^7.0.0`
diff --git a/website/sidebars.json b/website/sidebars.json
index 7a1d0540..793b1e99 100755
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -1,10 +1,19 @@
 {
   "docs": {
     "Docusaurus": ["doc1"],
-    "First Category": ["doc2"],
-    "Second Category": ["doc3"]
-  },
-  "docs-other": {
-    "First Category": ["doc4", "doc5"]
+    "Getting Started": [
+      "getting-started/react-jsx-highcharts",
+      "getting-started/react-jsx-highmaps",
+      "getting-started/react-jsx-highstock"
+    ],
+    "Highcharts Components": [
+      "api/caption"
+    ],
+    "Highmaps Components": [
+      "api/map-navigation"
+    ],
+    "Highstock Components": [
+      "api/navigator"
+    ]
   }
 }