Application shell

Admin toolbar

The top bar for creator/admin pages, switching between a default toolbar, a rich-text editor toolbar, and a settings header depending on the page mode.

Open in Storybook

Available

Ports as-is

All variants

Every variant this component declares, rendered together in one frame from its maintained Storybook story. Lantern stores only the story id and embeds Storybook rather than duplicating the component or its demo.

Admin toolbar

Rendered live from Storybook

Open

Storybook must be running for this to load — bun run start:storybook from the monorepo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.

Props

The component's public API, read from its TypeScript source. Descriptions come from TSDoc on the prop, so this table cannot drift from the component.

Prop	Type	Default	Description
`searchProvider`	`(query: string, limit?: number) => SearchResult[]`	`defaultSearchItems`	Optional app search adapter. Storybook supplies fixtures; consumers can omit it.
`onMenuToggle`	`() => void`	—	Undocumented — add TSDoc to the prop in the library.
`mobileMenuIcon`	`"menu" \| "back"`	`"menu"`	Mobile-only: icon shown for the menu/back button. "menu" = hamburger, "back" = chevron-left.
`onEditPage`	`() => void`	—	Undocumented — add TSDoc to the prop in the library.
`showEditButton`	`boolean`	`false`	Undocumented — add TSDoc to the prop in the library.
`editButtonLabel`	`string`	`"Edit"`	Undocumented — add TSDoc to the prop in the library.
`onAdd`	`() => void`	—	Undocumented — add TSDoc to the prop in the library.
`showAddButton`	`boolean`	`false`	Undocumented — add TSDoc to the prop in the library.
`addButtonLabel`	`string`	`"Add"`	Undocumented — add TSDoc to the prop in the library.
`addButtonIcon`	`React.ReactNode`	—	Undocumented — add TSDoc to the prop in the library.
`onShare`	`() => void`	—	Undocumented — add TSDoc to the prop in the library.
`onPreview`	`() => void`	—	Undocumented — add TSDoc to the prop in the library.
`hideShare`	`boolean`	`false`	Undocumented — add TSDoc to the prop in the library.
`sidebarCollapsed`	`boolean`	`false`	Undocumented — add TSDoc to the prop in the library.
`onToggleSidebarCollapse`	`() => void`	—	Undocumented — add TSDoc to the prop in the library.
`searchOpen`	`boolean`	—	Controlled search state from parent (driven by global ⌘K shortcut)
`onSearchOpenChange`	`(open: boolean) => void`	—	Undocumented — add TSDoc to the prop in the library.
`onSettings`	`() => void`	—	External settings handler (e.g. for channels) — overrides built-in PageSettingsModal
`settingsMode`	`boolean`	`false`	Settings mode — transforms toolbar into settings header
`settingsTitle`	`string`	—	Undocumented — add TSDoc to the prop in the library.
`onSettingsSave`	`() => void`	—	Undocumented — add TSDoc to the prop in the library.
`onSettingsClose`	`() => void`	—	Undocumented — add TSDoc to the prop in the library.
`settingsDirty`	`boolean`	`false`	Undocumented — add TSDoc to the prop in the library.
`editorMode`	`boolean`	`false`	Editor mode — replaces all default toolbar contents with text editor controls + Save/Cancel
`editorProps`	`AdminToolbarEditorProps`	—	Undocumented — add TSDoc to the prop in the library.
`title`	`React.ReactNode`	—	Mobile-only: page title shown next to back chevron
`mobileExtraItems`	`React.ReactNode`	—	Mobile-only: extra menu items inserted into the ellipsis dropdown after Search

Reference

Transcribed from the component audit. If this disagrees with the source, the source is right.

Source: src/components/layout/AdminToolbar.tsx
Portability: Copies across unchanged — only the utils import path moves.
Variants: mobileMenuIcon: menu | back
Notes: Use it at the top of editable creator pages (about, posts, store, products) to expose search, add, edit, share, and sidebar-toggle actions. Pass editorMode with editorProps to swap in text formatting controls (bold, italic, lists, link insertion) with Save/Cancel, or settingsMode for a page-settings header.