Topbar

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

Import

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

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

Usage

<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
• Single Crumb
• With Actions And End
• Mobile Without Menu
• Panel Layout
• Narrow

Source

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