Sidebar

Customize sidebar navigation in Netlify Create's visual editor.

Netlify Create presents a series of capabilities that can be launched from the left sidebar, but also provides the ability to extend the default behavior.

sidebarButtons

Add custom buttons to the sidebar for faster access to content or to handle external links.

Required
No
Allowed Values
An array of objects, where each object represents a custom button. See below for options for these objects.
Default
undefined
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
export default {
  sidebarButtons: [
    {
      label: 'Site management',
      type: 'model',
      icon: 'tools',
      modelName: 'SiteConfig',
    },
  ],
}

Options

Each sidebar button object supports the following properties.

type (required)

Must be one of: model, document, link

  • model: Opens a content object for that model name, specified by modelName. Requires modelName property where there is only one object of that model type.

  • document: Opens a specific document for editing, according to the documentId property, which must match an id property on a document available within the content source, as determined by the content source module used. Requires documentId to also be set.

  • link: When set to a relative URL (beginning with /), the visual editor will navigate to this page in the preview and adjust the controls accordingly. When set to an absolute URL (with or without protocol), the URL will be opened in a new tab. Requires url property to be set.

Both document and model buttons should also specify srcType and srcProjectId when using multiple content sources.

icon
One of the predefined icon names available for buttons. See list below.
label
Tooltip label for the button.
documentId

id property (determined by the configured content source) of the document to open in the page editor.

Required when type is document.

srcType

The name or grouping of the content source, as determine by the content source configuration.

Required when using multiple sources and when type is either document or model.

srcProjectId

The identifying value of the content source used to help identify a document or object to open, as determined by the content source configuration

Required when using multiple sources and when type is either document or model.

url

When set to a relative URL (beginning with /), the visual editor will navigate to this page in the preview and adjust the controls accordingly. When set to an absolute URL (with or without protocol), the URL will be opened in a new tab.

Required when type is set to link.

Available Icons

add-new
add-new-gear
analytics
external-link
global-objects
insights
personalization
search-settings
seo
style
tools
user-management

styleObjectModelName (deprecated)

This property sets the model name of a content item storing the site's global styles.

If set to a valid model name, a button will appear in the sidebar, labeled "Global styles". When clicked, the visual editor will look for a content item of that model name and open it for editing. The current page is not changed, so that you can edit styles and see the effect of your changes on whatever page you have open.

While this property is still supported, you can now achieve similar functionality by defining a sidebar button:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
export default {
  sidebarButtons: [
    {
      type: 'model',
      label: 'Global styles',
      icon: 'style',
      modelName: 'GlobalStylesConfig',
    },
  ],
  // other properties ...
}
Required
No
Allowed Values
The model name used for storing global style values.
  • 1
  • 2
  • 3
  • 4
export default {
  styleObjectModelName: 'GlobalStylesConfig',
  // other properties ...
}