TopBar
Top application bar. Holds a breadcrumb on the left and action buttons (TopBarIconButton) on the right.
Component behavior
TopBar renders an application header with location content on the left and actions on the right. The header has a fixed height of 40px and a bottom border. The application supplies navigation and state.
- Application headers paired with a Sidebar.
- A left-aligned Breadcrumb with application-wide actions on the right.
- A fixed 40-pixel header above scrolling content.
Props
breadcrumb renders directly as the first child and accepts any ReactNode. It is required. right renders in a flex container with margin-left: auto and spacing between children.
| Prop | Type | Default | Description |
|---|---|---|---|
breadcrumb | ReactNode | — | Left slot, rendered as the bar's first child with no wrapper element. A Breadcrumb by convention; any node works. Required by the type even when the bar carries only actions. |
right | ReactNode | — | Right slot. Wrapped in a flex row pushed to the far edge by margin-left: auto. Usually TopBarIconButton elements, but a Clock or a status chip also works here. |
TopBarIconButton
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | Icon inside a 24×24px button. The application supplies icon dimensions. |
dot | boolean | — | Displays a decorative 5px warning dot at the top-right corner. No accessible text is added. |
aria-label | string | — | Required accessible label for the icon-only button. |
Examples
Location and actions
Place hierarchy navigation on the left and application-wide actions on the right. Use the page header for page-specific actions.
Location only
right is optional. Its container still renders, so the layout is unchanged: the breadcrumb appears on the left and the rest of the bar is empty. Most inner pages of an app use exactly this.
Both slots take anything
left and right accept React content. Right-side children use an 8px gap.
In a shell column
TopBar uses flex: none and a fixed height of 40px. Tall children overflow the bar rather than increasing its height.
import { TopBar, TopBarIconButton } from "@solarius/onset";