Nav bar

In this tutorial, we are adding a nav bar to our Gatsby site.

Create a contact us page.

import React from 'react'
import Link from 'gatsby-link'

const ContactUs = () => (
    <div>
        <h1>This contact us page</h1>
    </div>
)

export default ContactUs

Now open your header.js file in components folder.

const Header = ({ siteTitle }) => (
  <div
    style={{
      marginBottom: '1.45rem',
    }}
  >
    <div
      style={{
        margin: '0 auto',
        maxWidth: 960,
        padding: '1.45rem 1.0875rem',
      }}
    >
      <nav>
        <ul style={{display:"flex",justifyContent:"space-between"}}>
          <li>
          <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/page-2">Page 2</Link>
          </li>
          <li>
            <Link to="/contactus">Contact us</Link>
          </li>
      </ul>
      </nav>

    </div>
  </div>
)

export default Header

That’s it we are successfully added a nav bar to our website.

nav bar gatsbyjs