SidebarNav

The side navigation of an office.

sidebar-nav.example.svelte

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

  let current = $state('games');
</script>

<div class="example-frame">
  <SidebarNav
    label="Office"
    {current}
    onNavigate={(id) => (current = id)}
    sections={[
      {
        items: [
          { href: '#home', icon: 'home', id: 'home', label: 'Overview' },
          {
            badge: '9',
            href: '#games',
            icon: 'game',
            id: 'games',
            label: 'Games',
          },
          { href: '#reports', icon: 'chart', id: 'reports', label: 'Reports' },
        ],
      },
      {
        items: [
          {
            href: '#partners',
            icon: 'building',
            id: 'partners',
            label: 'Partners',
          },
          {
            href: '#settings',
            icon: 'settings',
            id: 'settings',
            label: 'Settings',
          },
        ],
        title: 'Admin',
      },
    ]}
  />
</div>

Usage

Do

Group links by task; keep titles to one word.
Use onNavigate for client-side routing.

Don’t

Do not nest groups.

Accessibility

A nav landmark with titled groups; the current link is aria-current="page".

Keyboard

SidebarNav keyboard interactions
Keys	Action
`Tab, Shift+Tab`	Move focus in and out

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.

SidebarNav props
Prop	Type	Default	Description
`current`	`string`	—	The id of the current page's link.
`footer`	`Snippet`	—
`header`	`Snippet`	—
`label`	`string`	—
`onNavigate`	`(id: string) => void`	—	Client-side routing: called on a plain click (not with a modifier key) instead of following the link.
`sections` *required	`ReadonlyArray<IUiNavSection>`	—