Vertical toolbar

Move the toolbar from the bottom of the screen to a vertical strip on the left.

import { DefaultToolbar, TLComponents, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

const components: TLComponents = {
	Toolbar: () => <DefaultToolbar orientation="vertical" />,
}

export default function VerticalToolbarExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw components={components} />
		</div>
	)
}

DefaultToolbar takes an orientation prop. Override the Toolbar slot with a component that renders <DefaultToolbar orientation="vertical" /> and the toolbar, its groups, and its overflow menu all switch to a vertical layout. To also change which tools appear, pass children to DefaultToolbar (see the toolbar groups example).

Is this page helpful?
Prev
Toolbar groups
Next
Add a tool to the toolbar