Create persisted navigation for a page layout in a Gatsby app

Kyle Gill
InstructorKyle Gill

Share this video with your friends

Send Tweet

Create app like navigation that is shared across pages and will persist on the page (rather than re-rendering when you refresh or change pages) like you'd get in a traditional Single Page Application. This is useful for headers, sidebars, and navigation elements to preserve state and weird flashes of reloading content.

This lesson utilizes a few React components that implement the Gatsby specific wrapPageElement which is used to wrap all pages in a Gatsby app with a set of components. A similar API called wrapRootElement is often used to wrap an app in context providers.

Additional resources: