Header slots

Stable header chrome layout for draggable item shells (popup, modal, drawer, float, sidebar, bottom). Documented slot / prop names are Stable — renaming them is a major.

Related: Stable API · Docs hub

Layout

[ pre-title ] [ title | after-title ] …… spacer …… [ extra-btn ]

• pre-title — left of the title group (e.g. back / drag handle host).
• title — plain string for switcher/store (title prop) and/or custom node (#title / titleNode on sidebar).
• after-title — immediately to the right of the title (same title group), before the spacer.
• extra-btn — trailing actions after the spacer (close / expand / custom buttons).

DragHeader (internal) implements this layout; public item components forward the same names.

Vue ↔ React names

Vue slot	React prop / node	Role
pre-title	preTitle	Before the title group
title (prop)	title	Plain string (switcher menu + default header)
title (slot)	titleNode	Custom header title node (sidebar); falls back to title
after-title	afterTitle	Immediately after title, before spacer
extra-btn	extraBtn	Trailing header actions after the spacer
default	children	Panel body (not part of the header row)

Rules

1. Hosts that place actions “in the title” (e.g. menu location: 'title') must map those into the after-title / afterTitle slot — not extra-btn.
2. React sidebar: use title (string) for the switcher store label; use titleNode for a custom header node (Vue #title slot). Other shells may still pass a display title node where noted.
3. When the visible header differs from the switcher label, set both a plain title string and a styled #title / titleNode.
4. Do not place trailing chrome (close, expand, switcher) in after-title; those belong in extra-btn / built-in header actions.
5. Not every shell exposes every slot (e.g. some omit pre-title). Names that are documented on a component remain Stable for that surface.

Component docs

Component	Doc
Popup	draggable-item-popup.md
Modal	draggable-modal.md
Drawer	draggable-drawer.md
Float	draggable-item-float.md
Sidebar	draggable-item-sidebar.md
Bottom	draggable-item-bottom.md