Sidebar • MercuryCMS Docs

You can add items to the sidebar by POSTing to http://localhost:{{ cmsPort }}/api/addon/{{ addonId }}/state/sidebaritems. Subsequent calls to this endpoint will overwrite previous items.

// use axios
await axios.put(`http://localhost:${cmsPort}/api/addon/${addonId}/state/sidebaritems`, {
  sidebarItems: [
    {icon: 'star', name: 'My Addon', path: '/'},
    {icon: 'flag', name: 'Something Else', path: '/something-else', isBusy: true, number: 5},
  ]
})

// use static-cms-addon
import cms from 'static-cms-addon'

await cms.setSidebarItems([
  {icon: 'star', name: 'My Addon', path: '/'},
  {icon: 'flag', name: 'Something Else', path: '/something-else', isBusy: true, number: 5},
])

Option	Example Value	Description
`icon`	`"star"`	Material Icon to use on the left
`name`	`"My Page"`	Name to show on item
`path`	`"/mypage"`	Path to go to when clicked. `/addons/{{ addonName }}` will be added to beginning of the path
`isBusy`	`true`	When true, will show a busy indicator (spinning circle) to indicate an ongoing process (optional)
`number`	`10`	Number to show. Useful for indicating processing items within the Addon (optional)
`rightIcon`	`"star"`	Material Icon to use on the right. Useful for error indicators or update notifications (optional)
`matchAny`	`["/some/path"]`	Array of values to match against to indicate sidebar item is selected. Useful for more complex routes (optional)

While you are recommended to keep track of the Sidebar locally, you can also fetch the current state by calling getSidebarItems().

// use axios
let response = await axios.get(`http://localhost:${cmsPost}/api/addon/${addonId}/state`)
console.log(response.data.state.sidebarItems)
// [
//   {icon: 'star', name: 'My Addon', path: '/'},
//   {icon: 'flag', name: 'Something Else', path: '/something-else', isBusy: true, number: 5},
// ]

// use static-cms-addon
let sidebarItems = await cms.getSidebarItems()
console.log(response.data.state.sidebarItems)
// [
//   {icon: 'star', name: 'My Addon', path: '/'},
//   {icon: 'flag', name: 'Something Else', path: '/something-else', isBusy: true, number: 5},
// ]

#Sidebar

#Sidebar Item Options

#Get Sidebar Items