Share Common Markup Between Pages in Gatsby Using Layouts

Layout components are for sections of your site that you want to share across multiple pages. For example, Gatsby sites will commonly have a layout component with a shared header and footer. Other common things to add to layouts are a sidebar and/or navigation menu. On this page for example, the header at the top is part of gatsbyjs.org’s layout component.

It is recommended to create your layout components alongside the rest of your components (e.g. into src/components/).

In our example, we'll move all of the navigation to the layout component like so:

import React from 'react'
import { Link } from 'gatsby'
import { logout, isLoggedIn } from '../services/auth'
const Layout = ({ children }) => {
  return (
    <div>
      <h1>Gatsby Pokedex!</h1>
      {isLoggedIn() && (
        <button onClick={() => logout(() => {})}>
          Logout
        </button>
      )}
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/app/profile">Profile</Link>
        </li>
        <li>
          <Link to="/app/stats">Stats</Link>
        </li>
        <li>
          <Link to="pokemons">Pokemons</Link>
        </li>
      </ul>
      {children}
    </div>
  )
}

export default Layout