Top nav

Compact 44px header. Carries the current location via breadcrumb, surfaces global search and notifications, exposes contextual icon actions, and pins the active user identity. Controls without a handler render as visibly inert static previews.

Included in the single kansho full pack. Components are not offered as separate installs.

Mission detail (wired)

All controls have live handlers — try clicking

running

(canvas)

Static preview

No handlers wired — controls render visibly inert

(canvas)

Component documentation

Top Nav

components/shell/top-nav.tsx

Purpose

Composes breadcrumbs, utility actions, notifications, and user presence in a top navigation bar.

Appropriate use

Use above application content when global navigation context and account-level utilities share one persistent row.

Example

components/shell/top-nav.tsx has a representative live example in the "Mission detail (wired)" section on /components/top-nav.

States

Supports breadcrumbs, custom actions, interactive or unavailable search and notification controls, notification count, named user presence, status ring, and custom right-side content.

API and props

TopNav accepts crumbs, actions, search and notification visibility and callbacks, notificationsCount, user, statusRingColor, rightSlot, and className.

Dependencies

React, Lucide icons, Breadcrumb, Tag, Kbd, and the Kansho cn utility.

Accessibility

Uses breadcrumb navigation and labelled native utility buttons; unavailable static controls are marked disabled, and the user presence marker combines name and status in an image-style accessible label.

Limitations

It does not implement search, notifications, account menus, or routing; controls without callbacks remain intentionally inert.

Source

Source: components/shell/top-nav.tsx.

Full pack

components/shell/top-nav.tsx is documented at /components/top-nav and installs only through the single Kansho full pack; no individual component install is offered.