How to Model a Layout for a Navigation Menu

Sample design

For the purpose of this article we're going to use the following generic header & footer mockup – it contains a few elements typical to a standard website.

The content model

Logo Image

This will consist of an Image field.

1 of 6
< PreviousNext >

Tagline Text

This will consist of a Text field.

2 of 6
< PreviousNext >

Tagline Color

This will consist of a Color field that will provide a color picker for the content author.

3 of 6
< PreviousNext >

List of Links

We will use a Group field so that an editor can add as many links as needed. Each link will need:

  • A Text field for the display label
  • A Link field for the link url
4 of 6
< PreviousNext >

Footer Logo

This will consist of an Image field.

5 of 6
< PreviousNext >

Footer Text

This will consist of a Text field.

6 of 6
< PreviousNext >

The content model elements

For the given model we will need the following elements:

  • Logo Image
  • Tagline Text
  • Tagline Color
  • List of Links
  • Footer Logo
  • Footer Text

Why is it like that?

Selected approach: one single custom type, everything static. Given that you will only ever need one instance of this content, you can have the fields you need be static and combined into one single Custom Type. That way you will only need to query one document to have all your layout content.

Alternative approach: multiple custom types. Another approach would be to separate your different layout collections into separate documents. That is you could have a model for your Header content and another for your Footer content. This approach is up to you and how you want to organize your content.

The fields

Choosing the fields for each section is rather straightforward:

The fields for the header tab:

  • Image field for the header logo
  • Text field for the tagline
  • Color field for the tagline text color

The fields we need for the footer tab:

  • Group field for the list of links. In the Group field we will add a Text field for each link's label & a Link field for each link's url
  • Image field for the logo icon
  • Text field for the extra text

How to set it up in Prismic

  • Set up a new custom type
  • Add the fields for the Header content
  • Add a new tab for the Footer
  • Add the fields for the Footer content

If you want to try this model in Prismic, copy this JSON instead of setting up the model manually:


What editors will see

When an editor creates a document based on the Reusable Layout custom type created above, they can fill the placeholders with content.

How to model content for your project Sarah will be glad to help you come up with a solid content model for your project. (It’s free.) Schedule a call