TopBar

TopBar replaces ad-hoc header rows in product apps. Compose with SearchCommand, UserMenu, and NotificationCenter to assemble a full app shell header.

#Default usage

<TopBar
  actions={<Button size="sm">Invite</Button>}
  search={<SearchCommand />}
  sticky
  title="Workspace"
/>

#Import

import { TopBar } from "@froggdesign/enter-ui-react";

#Accessibility

TopBar renders as a <header> so the bar is announced as a banner landmark. Place exactly one TopBar per route to avoid landmark duplication.

#API

• title, breadcrumb: lead slots.
• search: middle slot, typically a SearchCommand.
• actions, notifications, user: trailing slots.
• sticky: pin to the top with data-sticky="true".

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.