diff --git a/src/components/Header.js b/src/components/Header.js
index 02aea35..aba097f 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -3,15 +3,19 @@ import Navbar from "react-bootstrap/Navbar"
 import Nav from "react-bootstrap/Nav"
 
 export function Header ( props ) {
-    return (    <Navbar>
+    // props.items is the value of nav state in App.js
+    // create a collection of navigation items
+    const Links = props.items.map( (item, itemkey) => {
+return (
+        <Nav.Link href={item.link} key={itemkey}> {item.label}  </Nav.Link>
+)
+    } )
+    return (
+            <Navbar>
         <Container>
           <Navbar.Brand>App</Navbar.Brand>
           <Nav>
-            <Nav.Link href="/">Home</Nav.Link>
-            <Nav.Link href="/about">About</Nav.Link>
-            <Nav.Link href="/contact">Contact</Nav.Link>
-            <Nav.Link href="/signup">Create Account</Nav.Link>
-            <Nav.Link href="/signin">Sign in</Nav.Link>
+            {Links}
             </Nav>
         </Container>
       </Navbar>)