Navigation

NativeHeader

One header component for every surface. In a mobile or desktop shell it configures the native header (through the SDK’s setHeader and useHeaderAction) and renders nothing in the page. In a browser and on TV it renders an in-page Header.

import { NativeHeader } from '@cskn/ui';

<NativeHeader
  title="Library"
  action={{ icon: 'share-outline', onPress: share }}
  onBack={goBack}
/>

string

Header title.

{ icon: string; id?: string; onPress: () => void }

Right-hand button. icon is an Ionicons name for the native bar.

string

Native bar colors (mobile and desktop).

() => void

Browser and TV fallback: show a back chevron.

boolean

Browser and TV fallback: show the close button.

TabBar

A fixed bottom tab bar. Like Header, it is safe-area aware and renders a spacer of its own height, so content never hides behind it.

import { TabBar } from '@cskn/ui';

<TabBar
  value={tab}
  onChange={setTab}
  items={[
    { key: 'home', label: 'Home', icon: 'home' },
    { key: 'alerts', label: 'Alerts', icon: 'bell', badge: 3 },
    { key: 'me', label: 'Me', icon: 'user', badge: true },
  ]}
/>

Each item has key, label?, icon? (an icon name or node) and badge? (a number, or true for a dot). Also takes haptic? (default true).

Tabs

In-page tabs, separate from the bottom TabBar.

import { Tabs } from '@cskn/ui';

<Tabs
  value={tab}
  onChange={setTab}
  items={[{ key: 'general', label: 'General' }, { key: 'notes', label: 'Notes', icon: 'edit' }]}
/>

A fixed side navigation that can collapse to icons only. Place it as the first child of a flex row; it reserves its own width.

import { Sidebar, SidebarHeader, SidebarNav, SidebarItem, SidebarSeparator, SidebarFooter, SidebarToggle } from '@cskn/ui';

<div style={{ display: 'flex', minHeight: '100dvh' }}>
  <Sidebar width={244} collapsedWidth={68} defaultCollapsed expandOnHover>
    <SidebarHeader><Logo /></SidebarHeader>
    <SidebarNav>
      <SidebarItem icon="home" label="Home" active onClick={() => go('/')} />
      <SidebarItem icon="image" label="Library" href="/library" />
      <SidebarSeparator />
      <SidebarItem icon="settings" label="Settings" onClick={() => go('/settings')} />
    </SidebarNav>
    <SidebarFooter><SidebarToggle /></SidebarFooter>
  </Sidebar>
  <main style={{ flex: 1 }}>…</main>
</div>

number

default:"244"

Expanded width in px.

number

default:"68"

Icon-only width in px.

…

Controlled or uncontrolled collapsed state.

boolean

While collapsed, expand temporarily on hover as an overlay, without moving the content.

boolean

The same on focus, for keyboard and TV remote.

'left' | 'right'

default:"'left'"

Edge to pin to.

number | string

default:"0"

Offsets, to sit under a top bar.

SidebarItem takes icon?, label, active? and href?. While collapsed, the label becomes the item’s tooltip. SidebarToggle collapses and expands the sidebar. On narrow screens, use a TabBar instead:

<Show above="lg"><AppSidebar /></Show>
<Show below="lg"><AppTabBar /></Show>

Breadcrumbs

import { Breadcrumbs } from '@cskn/ui';

<Breadcrumbs items={[
  { label: 'Home', onClick: goHome },
  { label: 'Library', href: '/library' },
  { label: 'Dune' },
]} />

Each crumb has label and either href or onClick. The last one is the current page.

Overview

Components

Platform

Profile integration

NativeHeader

TabBar

Tabs

Sidebar

​NativeHeader

​TabBar

​Tabs

​Sidebar

​Breadcrumbs

NativeHeader

TabBar

Tabs

Sidebar

Breadcrumbs