Block · C-055 · erp

TopBar

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.

Install

Blocks compose Koten primitives; install koten-theme first.

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

Anatomy

This block composes Koten primitives. Read the source files before changing it.

@/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

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.

Read the whole page