Sitemap Navigator | Netlify Create Docs

The sitemap navigator provides a single point from which to access all editable pages on a website.

Navigating the Sitemap#

The sitemap provides two ways to navigate:

Tree View#

The sitemap is built in a hierarchical way using the urlPath from page documents. (More on this below.)

It is collapsed by default, so that only top-level pages are visible. Each page can be expanded and collapsed as needed.

Searching Pages#

On larger sites, it's usually easier to search for a page. The search field is automatically focused when opening the sitemap. Search values query a page document's title and urlPath properties.

Populating the Sitemap#

The sitemap will be populated by default, according to your content schema. But it can also be customized as needed.

Default Sitemap from Pages#

By default, the sitemap is populated by retrieving the urlPath value from all documents of models with the type property set to page.

For content sources with inferred schemas (most headless CMSs), this typically involves extending the models that represent pages.

1
2
3
4
5
6
7
8
9
10
11

import { defineStackbitConfig } from '@stackbit/types'

export default defineStackbitConfig({
  contentSources: [
    // ...
  ],
  modelExtensions: [
    { name: 'page', type: 'page', urlPath: '/{slug}' },
    { name: 'post', type: 'page', urlPath: '/blog/{slug}' },
  ],
})

In this case, all pages and posts will show up in the sitemap.

Custom Sitemap#

To override default behavior, use the siteMap property. (See the reference.)

The siteMap property provides an array of SiteMapEntry objects. These objects can specify URL paths or be tied directly to a document. We suggest using TypeScript to introspect the expected properties.

Here's an example that implements a similar approach to the default sitemap behavior.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import {
  defineStackbitConfig,
  getLocalizedFieldForLocale,
  SiteMapEntry,
} from '@stackbit/types'

export default defineStackbitConfig({
  contentSources: [
    // ...
  ],
  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[]
  },
})