Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Global Admin Config

The behavior of Globals within the Admin Panel can be fully customized to fit the needs of your application. This includes grouping or hiding their navigation links, adding Custom Components, setting page metadata, and more.

To configure Admin Options for Globals, use the admin property in your Global Config:

1
import { GlobalConfig } from 'payload'
2
3
export const MyGlobal: GlobalConfig = {
4
// ...
5
admin: {
6
// ...
7
},
8
}

Admin Options

The following options are available:

OptionDescription
groupText used as a label for grouping Collection and Global links together in the navigation.
hiddenSet to true or a function, called with the current user, returning true to exclude this Global from navigation and admin routing.
componentsSwap in your own React components to be used within this Global. More details.
previewFunction to generate a preview URL within the Admin Panel for this Global that can point to your app. More details.
livePreviewEnable real-time editing for instant visual feedback of your front-end application. More details.
hideAPIURLHides the "API URL" meta field while editing documents within this collection.
metaPage metadata overrides to apply to this Global within the Admin Panel. More details.

Components

Globals can set their own Custom Components which only apply to Global-specific UI within the Admin Panel. This includes elements such as the Save Button, or entire layouts such as the Edit View.

To override Global Components, use the admin.components property in your Global Config:

1
import type { SanitizedGlobalConfig } from 'payload'
2
3
export const MyGlobal: SanitizedGlobalConfig = {
4
// ...
5
admin: {
6
components: {
7
// ...
8
},
9
},
10
}

The following options are available:

PathDescription
elements.SaveButtonReplace the default Save Button with a Custom Component. Drafts must be disabled.
elements.SaveDraftButtonReplace the default Save Draft Button with a Custom Component. Drafts must be enabled and autosave must be disabled.
elements.PublishButtonReplace the default Publish Button with a Custom Component. Drafts must be enabled.
elements.PreviewButtonReplace the default Preview Button with a Custom Component. Preview must be enabled.
viewsOverride or create new views within the Admin Panel. More details.

Preview

It is possible to display a Preview Button within the Edit View of the Admin Panel. This will allow editors to visit the frontend of your app the corresponds to the document they are actively editing. This way they can preview the latest, potentially unpublished changes.

To configure the Preview Button, set the admin.preview property to a function in your Global Config:

1
import { GlobalConfig } from 'payload'
2
3
export const MainMenu: GlobalConfig = {
4
// ...
5
admin: {
6
preview: (doc, { locale }) => {
7
if (doc?.slug) {
8
return `/${doc.slug}?locale=${locale}`
9
}
10
11
return null
12
},
13
},
14
}

The preview function receives two arguments:

ArgumentDescription
docThe Document being edited.
ctxAn object containing locale and token properties. The token is the currently logged-in user's JWT.
Next

Swap in your own React components