Navigation & Chrome
Components

Navigation & Chrome

Choose tabs, breadcrumbs, steppers, sidebars, and toolbars for an application shell.

Components in this category

PageHeader

Page title, stat rail, status and actions.

Tabs

Horizontal or vertical tab navigation.

Breadcrumb

Breadcrumb trail navigation.

Link

Text link with tone colors and external-link attributes.

Stepper

Where the reader is in a flow — four variants, five states.

Wizard

The multi-step flow itself — steps, values, validation, branches and completion.

WelcomeScreen

The screen before the first question — a greeting that cycles through its own translations.

WizardNav

Displays wizard steps in a vertical or horizontal list.

WizardFooter

A wizard's action row — Cancel, Back, Skip and the advance button.

WizardSummary

Wizard answers with links to edit the corresponding steps.

Sidebar

Application sidebar navigation container.

SidebarBrand

Brand/logo area at the top of a Sidebar.

SidebarOrgSwitcher

Organization/workspace switcher in a Sidebar.

SidebarNav

Navigation list inside a Sidebar.

SidebarNavGroup

Container grouping SidebarNavItem entries.

SidebarNavItem

Single navigation item with icon and badge.

SidebarFooter

Footer area pinned to the bottom of a Sidebar.

TabStrip

Browser-style tab strip.

BrowserTab

Single tab inside a TabStrip.

Toolbar

Horizontal action toolbar.

TopBar

Top application bar with search and actions.

TopBarIconButton

Icon button styled for the TopBar.

Clock

Live clock display in the TopBar.

Tabs & navigation

Tabs

Underlined tab strip. Works controlled or uncontrolled: omit activeKey for uncontrolled mode (falls back to defaultActiveKey or the first item). Each item renders as a button with role="tab".

Tabs props props
PropTypeDefaultDescription
itemsTabItem[]—Tab items with key, label, optional count, icon, and disabled.
activeKeystring—Controlled active tab key.
defaultActiveKeystring—Default active key when uncontrolled.
onChange(key: string) => void—Active key change handler.
Tabs

Breadcrumb

A horizontal breadcrumb trail. Pass items as ReactNode. The current (last) segment is rendered in bold, ancestors are dimmed, and separator slashes are inserted automatically.

Breadcrumb props props
PropTypeDefaultDescription
itemsReactNode[]—Breadcrumb segments. Last is rendered bold as the current page.
Onset/Components/Breadcrumb
Breadcrumb

Stepper

Shows where the reader is in a flow: numbered markers, checks behind them, an accent run of line up to the current step. Four variants (circles, bars, dots, panels), horizontal or vertical, and five states (error fails the current step, skipped marks an optional one that was passed). Pass onStepClick to make finished steps clickable (navigation back). Full reference on the Stepper page.

Stepper props props
PropTypeDefaultDescription
stepsStep[]—Steps with key, label, and optional description, icon, badge, group, optional, status.
activeIndexnumber—Index of the current step. Previous steps render as done.
variant"circles" | "bars" | "dots" | "panels"—Which drawing of the states.
orientation"horizontal" | "vertical"—Vertical is the rail, with group headings.
errorboolean | string | string[]—true fails the current step; keys fail those steps.
onStepClick(index: number, step: Step) => void—Makes completed steps clickable.
Stepper

Links

Link is the text link component, with the tone scale, the standard focus ring, and defaults for external links (target, rel, arrow glyph). It is a link when the click goes somewhere; if it performs an action, use a Button. Full props on its page.

LinkProps props
PropTypeDefaultDescription
asElementType"a"Router component used to render the link.
variantLinkVariant"underline""underline" | "hover" | "plain".
toneTone"info"Tone scale.
externalboolean—Arrow glyph, target="_blank" and a safe rel.
iconReactNode—Leading glyph.
disabledboolean—Inert text with no href.
Link
ImportTSX
import { Link, TextLink } from "@solarius/onset";

<Link href="/runs/8812">View run</Link>

// Same component, for apps that already import a router Link:
<TextLink href="/docs">Documentation</TextLink>

Sidebar

The application sidebar. Sidebar is the outer container, with a structured set of children: SidebarBrand (logo + name), SidebarOrgSwitcher (workspace picker), SidebarNav containing SidebarNavGroup and SidebarNavItem entries, and SidebarFooter (quota meter + user row).

Sidebar

Sidebar parts

Sidebar sub-components props
PropTypeDefaultDescription
SidebarHTMLElement—Container aside.
SidebarBrandHTMLDivElement—Logo + name. Props: logo (ReactNode), children (name).
SidebarOrgSwitcherHTMLButtonElement—Workspace picker button. Props: initials, name, sub.
SidebarNavHTMLElement—Navigation list.
SidebarNavGroupHTMLDivElement—Collapsible group wrapper.
SidebarNavItema | button—Nav item. Props: icon, active, count, countTone, href (renders as a).
SidebarFooterHTMLDivElement—Quota meter + user row. Props: usageLabel, usageValue, usagePercent, links, userInitials, userName, userEmail, onUserMenu.

Application chrome

Top-level application structure: browser-style tab strip, URL toolbar, top bar with breadcrumb + actions, and a live clock.

TabStrip & BrowserTab

A faux-browser tab strip framing the app. It is cosmetic chrome for mockups and demos. Each BrowserTab supports a favicon, title, close button, and active state.

TabStrip

Toolbar

Nav buttons + faux address bar + profile chip. Purely decorative chrome, matching the TabStrip's browser aesthetic.

Toolbar props props
PropTypeDefaultDescription
hostReactNode—URL host segment.
pathReactNode—URL path segment.
profileReactNode—Profile chip after the address bar.
canGoBackbooleantrueEnable back button.
canGoForwardbooleanfalseEnable forward button.
onBack() => void—Back click.
onForward() => void—Forward click.
onReload() => void—Reload click.
Toolbar

TopBar & TopBarIconButton

The application top bar: a breadcrumb on the left, action slots on the right. TopBarIconButton is an icon button styled for the top bar with an optional notification dot.

TopBar props props
PropTypeDefaultDescription
breadcrumbReactNode—Left-side content.
rightReactNode—Right-aligned actions.
TopBar

Clock

A live clock display styled for the top bar or dashboard header. Renders its children in a mono clock face.

14:32
Clock