PayloadCMS Globals Explained: Everything You Need to Know

In this guide, we’re going to go over how to use globals in Payload CMS. Let’s dive in.

Globals are very similar to collections. The primary difference is that collections allow you to create many of the same type of document multiple times. A global, however, corresponds to a single document. Just like collections, you’re able to create as many globals as you need, but none of them will create more than one document.

Globals are stored in your database and have the same fields available to it as collections do. Similarly to collections, globals also automatically generate Local API, REST API, and GraphQL API to query your documents on the frontend.

You’ll use globals for things like header and footer navigation or site-wide banners (like a sticky banner). So let’s create a header navigation as an example.

To get started, you’ll want to create a new directory called “globals.” In it, you’ll create another new directory called Header with a TypeScript file called “config.ts.” Next, import {GlobalConfig} from ‘payload’ at the top of the file, and export a constant called Header and assign the GlobalConfig type to it. You’ll set it equal to an object with the slug and fields options, use “header” for the slug and an empty array for your fields.

From there, you can import this header global into your payload config file by adding it to your globals array.

If you’d like to call the global something else, you can use the label option to change how it’s displayed in the admin dashboard navigation. You’ll still query the global by its slug on the frontend, but you can change the name just like you can for a collection.

Slug and fields are both required in order to initialize a global, but once you have those set, that’s all you really need.