<Toolbar />

The official BaseHub toolbar to manage draft mode and switch branches in your site previews.

import { Toolbar } from 'basehub/next-toolbar'

The Toolbar takes care of setting and managing the draftMode key without any other configuration or manual fetch to the BaseHub API.

Toolbar - Draft Mode Enabled
Toolbar - Draft Mode disabled

Props

Key

Type

Description

forceDraft

boolean

Will force the draft mode for the entire site when present.

Example

import { Toolbar } from 'basehub/next-toolbar'

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <Toolbar />
      <body>
        <ThemeProvider>
          <Header />
          {children}
          <Footer />
        </ThemeProvider>
      </body>
    </html>
  )
}