diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 6530eb98..8eae071d 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -2,13 +2,24 @@
The app bar is a special kind of toolbar that’s used for branding, navigation, search, and actions. Usually it contains controls on the right and left side and a title with the current section or app name. You should give the content with children elements.
+
```jsx
import AppBar from 'react-toolbox/lib/app_bar';
+import Navigation from 'react-toolbox/lib/navigation';
+import Link from 'react-toolbox/lib/Link';
+
+const GithubIcon = () => (
+
+);
const AppBarTest = () => (
-
- React Toolbox Docs
-
+ }>
+
+
+
+
);
```
diff --git a/docs/app/components/layout/main/modules/components.js b/docs/app/components/layout/main/modules/components.js
index 41a7ad78..8e647774 100644
--- a/docs/app/components/layout/main/modules/components.js
+++ b/docs/app/components/layout/main/modules/components.js
@@ -29,6 +29,7 @@ import Tooltip from 'react-toolbox/tooltip/readme';
import TimePicker from 'react-toolbox/time_picker/readme';
// Examples for the Playground
+import AppBarExample1 from './examples/app_bar_example_1.txt';
import AutocompleteExample1 from './examples/autocomplete_example_1.txt';
import AvatarExample1 from './examples/avatar_example_1.txt';
import ButtonExample1 from './examples/button_example_1.txt';
@@ -61,7 +62,8 @@ export default {
app_bar: {
name: 'App Bar',
docs: AppBar,
- path: '/components/app_bar'
+ path: '/components/app_bar',
+ examples: [AppBarExample1]
},
autocomplete: {
name: 'Autocomplete',
diff --git a/docs/app/components/layout/main/modules/examples/app_bar_example_1.txt b/docs/app/components/layout/main/modules/examples/app_bar_example_1.txt
new file mode 100644
index 00000000..246fb96a
--- /dev/null
+++ b/docs/app/components/layout/main/modules/examples/app_bar_example_1.txt
@@ -0,0 +1,16 @@
+const GithubIcon = () => (
+
+);
+
+const AppBarTest = () => (
+ }>
+
+
+
+
+
+);
+
+return