diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
index b9a38d4..87c65d9 100644
--- a/docs/.vuepress/enhanceApp.js
+++ b/docs/.vuepress/enhanceApp.js
@@ -1,4 +1,4 @@
-import { Header, HeaderLeft, HeaderMiddle, HeaderRight } from '../../src/components';
+import { Header, HeaderLeft, HeaderMiddle, HeaderRight, NavigationBar, NavigationItem } from '../../src/components';
 import '../../src/assets/css/tailwind.css';
 
 export default ({
@@ -11,5 +11,7 @@ export default ({
   Vue.component('HeaderLeft', HeaderLeft);
   Vue.component('HeaderMiddle', HeaderMiddle);
   Vue.component('HeaderRight', HeaderRight);
+  Vue.component('NavigationBar', NavigationBar);
+  Vue.component('NavigationItem', NavigationItem);
 }
 
diff --git a/docs/components/Navigation/README.md b/docs/components/Navigation/README.md
new file mode 100644
index 0000000..052f8bd
--- /dev/null
+++ b/docs/components/Navigation/README.md
@@ -0,0 +1,15 @@
+# Navigation
+<Header>
+  <HeaderLeft>
+  </HeaderLeft>
+  <HeaderMiddle>
+    <p>Yuika Mitsumine</p>
+  </HeaderMiddle>
+  <HeaderRight>
+    <NavigationBar>
+      <NavigationItem>
+        <a href="/">Home</a>
+      </NavigationItem>
+    </NavigationBar>
+  </HeaderRight>
+</Header>
diff --git a/docs/components/README.md b/docs/components/README.md
index 0eac4eb..27a0d0f 100644
--- a/docs/components/README.md
+++ b/docs/components/README.md
@@ -1 +1,4 @@
 # Components
+
+* [Header](header)
+* [Navigation](navigation)