# Topbar

> `Topbar` is part of the Shell set, imported from `@jcsoftdev/ui/shell`.

Source: https://ui.jcsoftdev.com/docs/components/topbar

`Topbar` is part of the Shell set, imported from `@jcsoftdev/ui/shell`.

## Import

```ts
import { Topbar } from "@jcsoftdev/ui/shell";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/shell/topbar`.

## Usage

```tsx
<Topbar
  breadcrumbs={["Barbería", "Agenda", "Hoy"]}
  breadcrumbsLabel="Ruta de navegación"
  menuLabel="Abrir menú"
  searchLabel="Buscar"
  searchPlaceholder="Buscar cliente, cita o producto"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `breadcrumbs` * | `string[]` |  | Breadcrumb trail in order; the last entry is the current view. |
| `breadcrumbsLabel` * | `string` |  | Accessible name of the breadcrumb landmark. |
| `onOpenMenu` | `(() => void)` |  | Menu button (shown when the `AppShell` container is under 900 px, matching the Sidebar drawer) that opens the sidebar drawer. Needs an `@container/app` ancestor, which `AppShell` provides. Omitted when not set. |
| `menuLabel` | `string` |  |  |
| `menuButtonRef` | `Ref<HTMLButtonElement>` |  | Ref to the menu button so the opener can restore focus when the drawer closes. |
| `onSearch` * | `() => void` |  | Called by the search trigger and by Cmd/Ctrl+K. |
| `searchLabel` * | `string` |  |  |
| `searchPlaceholder` * | `string` |  |  |
| `actions` | `ReactNode` |  | Slot between the search trigger and the end block (status, notifications, primary action). |
| `end` | `ReactNode` |  | Slot at the far end (e.g. the account menu). |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/shell-topbar--default)
- [Single Crumb](/storybook/?path=/story/shell-topbar--single-crumb)
- [With Actions And End](/storybook/?path=/story/shell-topbar--with-actions-and-end)
- [Mobile Without Menu](/storybook/?path=/story/shell-topbar--mobile-without-menu)
- [Panel Layout](/storybook/?path=/story/shell-topbar--panel-layout)
- [Narrow](/storybook/?path=/story/shell-topbar--narrow)

## Source

`packages/ui/src/shell/topbar/topbar.tsx`