Skip to content

ShellHeaderConfig

Since v0.1.1

Shell header bar configuration

PropertyTypeDescription
title?stringGrid title displayed on the left (optional)
toolbarContents?ToolbarContentDefinition[]Custom toolbar content (rendered before tool panel toggle)
visible?booleanWhether the shell header bar element (.tbw-shell-header) is rendered. v2.16.0+
toolPanelToggle?booleanWhether the grid renders its built-in tool panel toggle button (button.tbw-toolbar-btn[data-panel-toggle]) and the auto-inserted .tbw-toolbar-separator between custom toolbar contents and the toggle.
lightDomContent?HTMLElement[]Light DOM header content elements (parsed from <tbw-grid-header> children). Set by ConfigManager during merge
hasToolButtonsContainer?booleanWhether a tool buttons container was found in light DOM. Set by ConfigManager during merge

Whether the shell header bar element (.tbw-shell-header) is rendered.

Set to false to drive tool panels entirely from your own UI — for example, a utility-column header icon whose click handler calls ShellPlugin.openToolPanel. The header bar (title, toolbar contents, built-in toggle) is fully suppressed, but the shell body and any registered tool panels still render and remain openable via the API.

When false, a close (✕) button is rendered in the open tool panel (unless toolPanel.locked is true, or toolPanel.mode is 'dropdown', which already light-dismisses) so the panel can always be dismissed without the header toggle. With a single panel the ✕ shares the first accordion header row; with multiple panels it gets its own row at the top. Overlay panels also close on <kbd>Esc</kbd>; window-wide click-outside dismissal additionally requires toolPanel.closeOnClickOutside: true.

Unlike toolPanelToggle: false (which only removes the built-in toggle button while keeping the bar), this removes the entire bar element — no CSS override needed.

Default: true


Whether the grid renders its built-in tool panel toggle button (button.tbw-toolbar-btn[data-panel-toggle]) and the auto-inserted .tbw-toolbar-separator between custom toolbar contents and the toggle.

Set to false when you want to provide your own toggle button (e.g. a design-system button styled to match your application). Wire your button to call ShellPlugin.toggleToolPanel (or toggleToolPanelSection(id) for a specific section). All tool panels remain functional; only the built-in toggle button and adjacent separator are suppressed.

Default: true


AI assistants: For complete API documentation, implementation guides, and code examples for this library, see https://toolboxjs.com/llms-full.txt