Sitemap

Building a sitemap for your site helps Stackbit understand how to navigate between pages and also how to make pages editable.

Sitemap Navigator#

The sitemap navigator gets populated either from the output of the siteMap property or using the urlPath property of every document from a page type model.

`siteMap`#

Explicitly sets the list of pages listed in the sitemap navigator.

Required

Allowed Values

A function that returns an array of SiteMapEntry objects.

The function has a single parameter as an object with the following properties:

documents: An array of all DocumentWithSource objects retrieved from all content sources.
models: An array of all ModelWithSource objects retrieved from all content sources.

SiteMapEntry objects support the following properties:

document (optional): A DocumentWithSource object. This should have the same shape as items within the documents passed into the function as a property within the only argument. When included, this enables the page editor when this page is active in the preview.
isHomePage (optional): Set to true when the page represents the home page (usually when urlPath is /).
label (optional): String value for the page, which is listed below the URL in the sitemap navigator. Defaults to the labelField field for the document's model.
stableId: An ID that will not change when the document changes. This is typically set to the document's id property.
urlPath: The path to follow when clicking on the item in the sitemap navigator.

Default

When siteMap is not used, the sitemap navigator is populated using the urlPath property of every document from a page type model.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import { ContentfulContentSource } from '@stackbit/cms-contentful'
import { defineStackbitConfig, getLocalizedFieldForLocale, SiteMapEntry } from '@stackbit/types'

export default defineStackbitConfig({
  stackbitVersion: '~0.6.0',
  contentSources: [new ContentfulContentSource(/* ... */)],
  modelExtensions: [{ name: 'page', type: 'page', urlPath: '/{slug}' }],
  siteMap: ({ documents, models }) => {
    const pageModels = models.filter((m) => m.type === 'page').map((m) => m.name)
    return documents
      .filter((d) => pageModels.includes(d.modelName))
      .map((document) => {
        const slug = getLocalizedFieldForLocale(document.fields.slug)
        if (!slug.value) return null
        const urlPath = '/' + slug.value.replace(/^\/+/, '')
        return { stableId: document.id, urlPath, document, isHomePage: urlPath === '/' }
      })
      .filter(Boolean) as SiteMapEntry[]
  },
})

Type definitions are being explored and may change.
Notice the following about the highlighted code above:
- pageModels makes use of modelExtensions by automatically retrieving a set of model names when type is set to page.
- Documents without a slug are ignored because a urlPath cannot be determined.
- getLocalizedFieldForLocale is a utility that introspects an object and returns the appropriate field object. Within that object, a value property contains the value for the field.

Sitemap Navigator#

siteMap#

`siteMap`#