One handle per group, and it is the separator.
This page shows toolbar groups with one drag handle each. Commands come in groups: document, tools, view, zoom, panels, export, share. A group docks into five hosts (the title bar, a top or bottom toolbar, the left or right edge, where it turns vertical), each with a start, centre and end zone; dropped over the document, it floats. Drag a handle to move its group, double-click it to collapse the group to handle + », right-click it or press Shift F10 for its menu. There are no frames, dividers or ⋯ buttons, and a toolbar is only a host.
Built with @n-uf/motion (opens in a new tab) createSettleRedraws the rules of @n-uf/placement/toolbar + /targets (opens in a new tab) hosts, zones, overflow and drop targets · @n-uf/motion/drag (opens in a new tab) the drag intent and the three previews
Scope of work
Every window on this site is built from the same groups: drag a handle in any figure's bars to rearrange them, and right-click it for Reset position.
Drag toolbar groups between hosts and zones in the lab, and watch them collapse as room runs out.
What the handle does, and where a group can go
What carries a handle?
Every group of two or more controls has exactly one: compact dots (one line of 3), at its left edge in a row, on its top edge, centred, in a column. A handle only goes where something can move: the window itself cannot, so its title bar starts with the lights; a toolbar (the host) and a lone control have none.
How do you tell which group a handle leads?
It sits at the start of its group, 3 px from its controls and 12 px from the previous group; pointing at it or focusing it dims every other group. No frames, bands, tints or divider lines.
What can the handle do?
Drag: move the group. Double-click: collapse to handle + » (or expand). Right-click, long-press or Shift+F10: its menu (Collapse, Move to ›, Float/Dock, Move this bar's groups to ›, Reset position). No ⋯, ⋮ or ▾ buttons anywhere.
Where can a group go?
Five hosts × three zones; before all, after all or between. Over the document it floats: the same group, plus a frame and shadow. On a side it takes its compact form: icons and mono numbers, never rotated text.
Whole toolbars to a side?
Move a bar's groups together from any of their menus ("Move this bar's groups to › Left edge"); there is no toolbar handle.
Running out of room
Toolbars never wrap: groups collapse to handle + » by keep priority, trailing groups first among equals; clicking » shows the hidden controls.
Empty hosts
Take no space; while dragging they show as drop strips over the edge, so nothing moves.
Frozen layout
The lock switch freezes or unfreezes the layout. Frozen, the grips disappear (nothing can move, so nothing invites a drag). Holding Alt brings them back, working, for as long as it is held.
Dropping
An indicator only once you aim, the nearest insertion point in the host under the pointer, the group's own outline as the slot, held at borders; the drop lands where it shows. Escape puts the group back.
Keyboard
Tab focuses handles; Shift+F10 opens the menu; Enter or Space collapses; arrow keys move the group to the next host; Esc cancels.
@n-uf/placement gives the groups, hosts, zones, overflow and drop targets; @n-uf/motion gives the drag intent and the glides. The handles, menus, the lock with Alt, Escape and the keys are this demo's own behaviour around them. How the drop finds its target is the drag-intent model; how a group glides into place is the settle curve.
Questions
What happens to toolbar groups when the toolbar runs out of room?
They fold from the trailing end first. layoutHost from @n-uf/placement/toolbar lists the folded groups in overflow. Give a primary group a higher keep and it keeps its full form longest; groups with equal keeps still fold from the trailing end. Your app draws the folded groups.
How many hosts and zones can a toolbar group go in?
Five hosts, title, top, bottom, left and right, each with three zones: start, centre and end. A group can also float. Insertion points cover before all, between groups, after all and an empty zone. @n-uf/placement/toolbar lays this out, and your app draws the result.
How do I make toolbar groups draggable?
Take drop targets from hostTargets and floatTarget in @n-uf/placement/targets, and feed them to createDragIntent from @n-uf/motion/drag. hostTargets leaves the group's own place out and returns it as own, for the drag's home, and every host target carries its slot, the rect the group fills once it lands there.
How do I save and restore a toolbar layout?
Use storeArrangement and readArrangement from @n-uf/placement/toolbar. storeArrangement returns versioned plain data that you stringify. Pass the parsed data, not the string, to readArrangement: it never throws, and an unknown version comes back as ok: false. Place groups added since the save with resetGroup.
How do I step through drop targets with the keyboard?
Order the targets with keyboardStops from @n-uf/placement/targets. It puts a toolbar group's targets in reading order, title, top, left, right, bottom and then start, centre, end, for the arrow keys and a "Move to" menu, with the group's own place as home. Your app handles the keys and draws the focus.