AppHeader

The dashboard’s 48px top bar: wordmark, workspace name, Docs, and the account menu that holds the only Sign out.

LayoutIsland

Examples

Signed-in bar

Open the avatar for the account menu: name and email, Settings, the Theme radios, and Sign out.

Switchboard

Personal

Docs

Example

Wrap

<AppHeader
  homeHref="/dashboard"
  workspace="Personal"
  docsHref={docsHref}
  account={{ name: 'Wren Tamsin', email: 'wren@example.com' }}
  accountItems={[{ name: 'settings', label: 'Settings', icon: 'settings', href: '/dashboard/settings' }]}
  theme={{ action: routes.theme.href(), value: theme ?? 'system' }}
  signOutAction={routes.auth.signout.href()}
/>

Usage

Wrap

import { AppHeader } from '@switchboard/ui'

<AppShell sidebar={sidebar} header={<AppHeader … />} footer={<AppFooter … />}>
  {children}
</AppShell>

Props

Every component also takes mix, for css() and mixins applied after its own style.

`AppHeader`

AppHeader props
Prop	Type	Default	Description
account*	{ name: string; email?: string }	–	Avatar initials and the menu header.
signOutAction*	string	–	Where Sign out posts. The account menu is the app’s only Sign out.
workspace	string	–	Static workspace name after the wordmark. No switcher until there is more than one.
docsHref	string	–	Docs link. External URLs open in a new tab and show an icon.
accountItems	MenuEntry[]	–	Entries above Theme and Sign out (Settings).
theme	{ action: string; value?: ThemeChoice }	–	Adds the Theme radio group; choosing posts theme=… to action.
homeHref	string	'/'	Where the wordmark links.
actions	RemixNode	–	Extra controls before Docs.

Also accepts every <header> attribute.

Accessibility

Renders the page <header> (banner landmark). AppShell puts the phone drawer button in front of it.
The avatar button is named "Account: {name}" and opens a menu: arrow keys, Home/End, typeahead, Escape; focus returns to the avatar.
Theme choices are menuitemradio items with aria-checked.
Menu items render once hydrated; without JavaScript a plain Sign out form is shown instead (noscript).