---
title: "TopBar"
description: "The route's sticky header: context on the left, search in the middle and actions at the end. On narrow screens the search drops to its own row."
kind: block
id: C-055
category: erp
registry: "top-bar"
docs: "https://koten.codehive.com.co/blocks/erp/top-bar"
markdown: "https://koten.codehive.com.co/md/blocks/erp/top-bar.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/top-bar.json"
language: en
---

# TopBar · トップバー

> Block C-055 in the Koten UI catalog.

The route's sticky header: context on the left, search in the middle and actions at the end. On narrow screens the search drops to its own row.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/top-bar.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/top-bar.json
```

## Files

- `@/components/patterns/top-bar.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Composition

This block composes Koten primitives. Read the source files above before changing its anatomy.

## Examples

### Search and actions

Context, search and actions in one row; type to see the value reflected.

```tsx
<TopBar
  left={<Breadcrumb items={crumbs} label="Breadcrumb" />}
  search={
    <Input
      type="search"
      size="sm"
      aria-label="Search"
      placeholder="Order, customer or SKU"
    />
  }
  actions={
    <>
      <SyncState />
      <Button size="xs" variant="outline">New order</Button>
    </>
  }
/>
```

### Actions only

Without search, the bar keeps context on the left and actions at the end.

```tsx
<TopBar
  left={<span className="text-2xs text-muted">KURA / <span className="font-semibold text-ink">Orders</span></span>}
  actions={<UserMenu />}
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `left` | `ReactNode` | `—` | Context or breadcrumbs; it does not shrink below its content. |
| `search` | `ReactNode` | `—` | Below 640 px it takes its own row; supply the field's accessible name yourself. |
| `actions` | `ReactNode` | `—` | Aligned to the end with ms-auto; user, theme or route actions. |
| `className` | `string` | `—` | Adds to the sticky header; static turns it off in a demo. |

## Accessibility

- The search field needs an accessible name: use Field or aria-label, the slot does not provide one.
- The header is sticky with z-30; do not stack lower-z menus on it or cover the focus ring.
- Below 640 px search moves to its own row and focus order follows the DOM: context, search, actions.

## Sources

- Catalog page: https://koten.codehive.com.co/blocks/erp/top-bar
- Markdown: https://koten.codehive.com.co/md/blocks/erp/top-bar.md
- Repository: https://github.com/codehive-colombia/koten