Public pages

SiteBar

The floating glass bar at the top of public pages (the landing page).

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`brand`Required	`React.ReactNode`
`href`	`string`
`brandLabel`	`string`
`label`	`string`
`className`	`string`
`children`	`React.ReactNode`

Guidelines

The floating glass bar at the top of public pages (the landing page). It is the navigation layer there, so it is glass, like the side navigation and the floating toolbar in the app.

Provide: brand (the logo: the color theme's mark beside the wordmark), href (where the brand goes, default /), and the actions as children: a quiet Link to sign in and one primary Button to start.

Sticky, 16px from the top, inset from the edges, as wide as the page content (1200px at most). The page scrolls under it and the glow and panels blur through.
Two actions at most. The call to action is the black primary Button; never a second filled button beside it.
On phones keep only the primary Button; hide the quiet Link if the brand would crowd it.
Not for the app. Signed in, the app frame (SideNav, floating toolbar, TabBar) does this job.