diff --git a/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css b/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css
new file mode 100644
index 0000000..8133516
--- /dev/null
+++ b/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css
@@ -0,0 +1,25 @@
+.NavigationItem {
+ margin: 0;
+ box-sizing: border-box;
+ display: flex;
+ height: 100%;
+ align-items: center;
+}
+
+
+.NavigationItem a{
+ color: white;
+ text-decoration: none;
+ height: 100%;
+ padding: 16px 10px;
+ border-bottom: 4px solid transparent;
+ box-sizing: border-box;
+ display: block;
+}
+
+.NavigationItem a:hover,
+.NavigationItem a:active,
+.NavigationItem a.active {
+ background-color: #8f5c2c;
+ border-bottom: 4px solid #40a4c8;
+}
\ No newline at end of file
diff --git a/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.js b/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.js
new file mode 100644
index 0000000..ac8095d
--- /dev/null
+++ b/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import classes from './NavigationItem.css';
+
+const navigationItem = (props) => (
+
+
+ {props.children}
+
+
+)
+
+export default navigationItem;
\ No newline at end of file
diff --git a/src/components/Navigation/NavigationItems/NavigationItems.css b/src/components/Navigation/NavigationItems/NavigationItems.css
new file mode 100644
index 0000000..a3fe703
--- /dev/null
+++ b/src/components/Navigation/NavigationItems/NavigationItems.css
@@ -0,0 +1,8 @@
+.NavigationItems {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: flex;
+ align-items: center;
+ height: 100%;
+}
\ No newline at end of file
diff --git a/src/components/Navigation/NavigationItems/NavigationItems.js b/src/components/Navigation/NavigationItems/NavigationItems.js
new file mode 100644
index 0000000..c1db0aa
--- /dev/null
+++ b/src/components/Navigation/NavigationItems/NavigationItems.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import NavigationItem from './NavigationItem/NavigationItem';
+import classes from './NavigationItems.css';
+
+const navigationItems = () => (
+
+ Burger Builder
+ Checkout
+
+)
+
+export default navigationItems
\ No newline at end of file
diff --git a/src/components/Navigation/Toolbar/Toolbar.js b/src/components/Navigation/Toolbar/Toolbar.js
index 1d429e6..f5ab3c6 100644
--- a/src/components/Navigation/Toolbar/Toolbar.js
+++ b/src/components/Navigation/Toolbar/Toolbar.js
@@ -2,6 +2,7 @@ import React from 'react';
import classes from './Toolbar.css';
import Logo from '../../Logo/Logo';
+import NavigationItems from '../NavigationItems/NavigationItems';
const toolbar = () => {
return (
@@ -9,7 +10,7 @@ const toolbar = () => {
MENU
)