> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigation

> NativeHeader, TabBar, Tabs, Sidebar and Breadcrumbs.

## 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`](/ui/components/screen#header).

```tsx theme={null}
import { NativeHeader } from '@cskn/ui';

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

<ParamField path="title" type="string">Header title.</ParamField>
<ParamField path="action" type="{ icon: string; id?: string; onPress: () => void }">Right-hand button. `icon` is an Ionicons name for the native bar.</ParamField>
<ParamField path="backgroundColor / textColor" type="string">Native bar colors (mobile and desktop).</ParamField>
<ParamField path="onBack" type="() => void">Browser and TV fallback: show a back chevron.</ParamField>
<ParamField path="showClose" type="boolean">Browser and TV fallback: show the close button.</ParamField>

## 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.

```tsx theme={null}
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`.

```tsx theme={null}
import { Tabs } from '@cskn/ui';

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

## Sidebar

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.

```tsx theme={null}
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>
```

<ParamField path="width" type="number" default="244">Expanded width in px.</ParamField>
<ParamField path="collapsedWidth" type="number" default="68">Icon-only width in px.</ParamField>
<ParamField path="collapsed / defaultCollapsed / onCollapsedChange" type="…">Controlled or uncontrolled collapsed state.</ParamField>
<ParamField path="expandOnHover" type="boolean">While collapsed, expand temporarily on hover as an overlay, without moving the content.</ParamField>
<ParamField path="expandOnFocus" type="boolean">The same on focus, for keyboard and TV remote.</ParamField>
<ParamField path="side" type="'left' | 'right'" default="'left'">Edge to pin to.</ParamField>
<ParamField path="top / bottom" type="number | string" default="0">Offsets, to sit under a top bar.</ParamField>

`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:

```tsx theme={null}
<Show above="lg"><AppSidebar /></Show>
<Show below="lg"><AppTabBar /></Show>
```

## Breadcrumbs

```tsx theme={null}
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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.