Topbar

App-shell top bar with tabs.

The application top bar: brand, a set of tabs, and the active user.

Demo

Demo loads from http://localhost:6006. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Topbar } from 'dssoca';
  let active = $state('overview');
</script>

<Topbar {active} tabs={['overview', 'services']}
  onTab={(t) => (active = t)} />

Props

Prop	Type	Default	Description
`active`	`string`	`'overview'`	Active tab id.
`tabs`	`string[]`	—	Tab labels.
`user`	`string`	—	Current user label.
`onTab`	`(tab: string) => void`	—	Tab-change handler.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.