diff --git a/src/components/header/PageHeader.js b/src/components/header/PageHeader.js
index f4e9ad6..5dbff3f 100644
--- a/src/components/header/PageHeader.js
+++ b/src/components/header/PageHeader.js
@@ -2,10 +2,21 @@ import React from 'react';
import PropTypes from 'prop-types';
import './PageHeader.css';
import ToggleButton from '../toggleButton/ToggleButton';
+import Menu from '../menu/Menu';
+
+const menuOptions = [
+ {
+ label: 'Home',
+ link: '/'
+ }
+];
const PageHeader = ({ drawerClickHandler }) => {
return (
diff --git a/src/components/menu/Menu.css b/src/components/menu/Menu.css
new file mode 100644
index 0000000..7222ada
--- /dev/null
+++ b/src/components/menu/Menu.css
@@ -0,0 +1,31 @@
+ul, li {
+ list-style-type:none;
+}
+.Menu--container {
+ display: block;
+ width: 100%;
+ height: 50px;
+ text-align: right;
+ background: #000;
+ color: #fff;
+ border-radius: 25px;
+}
+.Menu__option {
+ height: 100%;
+ display: inline-block;
+ padding: 16px;
+ -webkit-transition: ease-in-out .2s;
+ -o-transition: ease-in-out .2s;
+ transition: ease-in-out .2s;
+ border-radius: 30px;
+}
+.Menu__option:hover {
+ color: #000;
+ background: #fff;
+ cursor: pointer;
+}
+.MenuOption {
+ color: inherit;
+ text-decoration: none;
+ text-transform: uppercase;
+}
diff --git a/src/components/menu/Menu.js b/src/components/menu/Menu.js
new file mode 100644
index 0000000..99fb562
--- /dev/null
+++ b/src/components/menu/Menu.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import MenuOption from './MenuOption';
+import './Menu.css';
+
+const Menu = ({ options }) =>
+
+
+ {
+ options.map(({ label, link }) =>
+ -
+
+
+ )
+ }
+
+
+
+export default Menu;
diff --git a/src/components/menu/MenuOption.js b/src/components/menu/MenuOption.js
new file mode 100644
index 0000000..749a84d
--- /dev/null
+++ b/src/components/menu/MenuOption.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const MenuOption = ({ label, link }) =>
+
+ {label}
+
+
+
+export default MenuOption;