Project Template

Layout Components

Page/Layout communication

Hover over the buttons below to see how data and elements in the layout component can be communicated with. The message below the buttons is also passed down from the layout component.

Hello World!

Description

Layout components are stored in the "layouts" folder and built like normal components. Unlike normal components, however, they're mounted to wrap all other components by the gatsby-plugin-layout plugin.

Because Gatsby is made up of individual static pages created at build time, page changes unmount components. A layout component included through the plugin, however, will persist wherever the layout is used.

The title animation in the header demonstrates a how a layout will stay mounted across static pages. ie. The title should only animated once (rather than again on each page).

Multiple layouts are possible: Plugin Documentation