Navigation & Chrome

Toolbar

Browser-style toolbar with nav buttons, URL bar, and a profile slot. Purely cosmetic chrome for mockups and demos.

Props

Toolbar extends HTMLAttributes<HTMLDivElement>.

ToolbarProps props

Prop	Type	Default	Description
`host`	`ReactNode`	—	The host portion of the URL, displayed in bold.
`path`	`ReactNode`	—	The path portion of the URL.
`profile`	`ReactNode`	—	Optional content rendered on the right side of the toolbar.
`canGoForward`	`boolean`	`false`	Enables the forward navigation button.
`canGoBack`	`boolean`	`true`	Enables the back navigation button.
`onBack`	`() => void`	—	Click handler for the back button.
`onForward`	`() => void`	—	Click handler for the forward button.
`onReload`	`() => void`	—	Click handler for the reload button.

Toolbar

With forward disabled

ImportTSX

import { Toolbar } from "@solarius/onset";