TopBar

The top bar of a site or an office.

top-bar.example.svelte

<script lang="ts">
  import { Button, TopBar } from '@onlywin/ui-svelte';
</script>

<div class="example-frame example-frame--wide">
  <TopBar
    brandHref="#top"
    label="Site"
    current="games"
    links={[
      { href: '#games', id: 'games', label: 'Games' },
      { href: '#news', id: 'news', label: 'News' },
      { href: '#partners', id: 'partners', label: 'Partners' },
    ]}
  >
    {#snippet actions()}
      <Button variant="primary" size="sm" iconStart="play">Play demos</Button>
    {/snippet}
  </TopBar>
</div>

Usage

Do

Keep the main action on the right.

Don’t

Do not put more than five links in it.

Accessibility

A header with a nav landmark; on small screens a menu button with aria-expanded opens the links.

Keyboard

TopBar keyboard interactions
Keys	Action
`Tab, Shift+Tab`	Move focus in and out
`Enter, Space`	Activate

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

TopBar props
Prop	Type	Default	Description
`actions`	`Snippet`	—	Right side: language, theme, account, the main action.
`brand`	`Snippet`	—	Replaces the default logo.
`brandHref`	`string`	`'/'`
`current`	`string`	—
`label`	`string`	—
`links`	`ReadonlyArray<IUiNavItem>`	`[]`