Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Integrating CMS Data

You can use Builder CMS Data to create structured reusable data across your site. You can manage the data schema, add, and remove fields within the UI and teammates can create and remove data items in auto-generated structured forms.

Examples include:

  • Header navigation links
  • Blog authors
  • Structured rich content such as user profiles

This tutorial shows you how to add editable navigation links to your site header.

Prerequisites

To follow along with this tutorial, you should have the following:

  • a Builder account
  • an app in the framework of your choice with the appropriate SDK installed

👉 Tip: If you need to create an app, follow the steps for your framework in the Create an app section of Integrating Builder Pages.

Add header navigation link data to your app

Creating a Data model

In the Builder UI, create a Data model so you can create your navigation links.

You can start by clicking Models in the left side nav on the Dashboard.

Click +Create Model.

Select Data from the list.

Enter Nav link as the name for your new Data model.

Adding label and URL fields

On the Edit Model page, click +New Field.

Edit the field Name to label and keep Type as Text.

Create a new field by clicking +New Field. Edit the field Name to url and Type to Url.

Click Save.

Creating Nav link content items

Now that your Data model is set up, you can create Nav link content items to add links to your header.

Click on Content in the left side nav in the Dashboard.

Select Nav link in the Models list. Click the +New button.

Click on Nav link.

To create a new Nav link content item, complete the following steps:

  1. Assign your link's name to the Title field.
  2. Assign your link's label to the Label field.
  3. Assign your link's URL to the Url field.
  4. Click Publish.

Now navigate back to your website and refresh the page to see your nav links listed in the header.

Next steps

For more information on how to work with Models in Builder, refer to Understanding Content Models.

Was this article helpful?