How to use this block

1. Copy the source code and paste it into an .mdx file under content/blocks/header.mdx.
2. Your site will automatically pick it and display it in the site's header.

Tip

This example has all the code in one file so that it is easy to copy and paste. On your site, you can split this into multiple blocks and compose them together.

Example: Extract the nav into its own content/blocks/header-nav.mdx block. Then use in as follows:

// content/blocks/header.mdx
...
export const HeaderBlock = ({ ...props }) => {
  ...
  <Block src="branding" />
  <Block src="header-nav" />
  ...
}
...

Read more

Read more on blocks in the docs.