Veryfront Logo

Layout Components

Learn how to use Layout Components in your pages.

What Are Layout Components?  

A Layout Component is a component that wraps around your pages.

Component Hierarchy

You typically use Layout Components to share common UI elements across pages, such as header and footer elements. At their core, they are just regular components. However, they must include props.children to render the enclosed page components.

Here’s a sample Layout Component:

import Header from '@components/header'
import Footer from '@components/footer'
import LinkList from '@components/link-list'

  <Box as="main">

Create a Layout Component  

Open the Components menu in the Sidebar and click the plus icon in the top right corner to create a new component.

Components Menu New Component

Enter the component name and slug and confirm by clicking “Create Component“.

Create Component Overlay

Now you can edit your Layout Component.

Edit a Layout Component  

Layout Components must contain props.children to render the enclosed page components.

Define a Default Layout  

Every new project comes with a default Layout component listed under the Components tab.

To specify a different default layout, open the Provider Settings in the Sidebar.

Provider Settings Layout Component Selector

In the Provider Settings, you can enter the name of the new layout to update the Default Layout and save your changes.

After this change, all pages for which you do not overwrite the default layout will automatically use the new layout.

Overwrite the Default Layout  

If you want to use a layout other than the default layout for a page, you can overwrite it. To do this, define the layout path in the Front Matter of a page as follows:

layout: my-layout-path

Next Steps  

Next, we recommend you to learn more about:

  • MDX Content
  • Context
  • App Component
<  App ComponentTheming  >
Veryfront Logo


© 2022 CoderSociety GmbH. Hosted in Germany.

Made with Veryfront