AdminBar

v1.0.0

Top admin bar for breadcrumbs, actions, and contextual controls.

Import

import { AdminBar } from '@meteorack/sdk-react';

How To Use It

Use it inside AdminShell for page-level context such as breadcrumbs, global actions, and status indicators.
Keep the admin bar focused on cross-page controls and leave page-specific content to PageHeader and body cards.

Works Well With

AdminShell Sidebar Button

Props

siteName?: string

Short title rendered on the left side of the bar.

logo?: ReactNode

Optional branding element rendered next to the site name.

center?: ReactNode

Optional centered content such as breadcrumbs, search, or status chips.

actions?: ReactNode

Optional right-aligned controls such as account menus or quick actions.

Example

AdminBar.tsx

import { AdminBar, Button, Badge } from '@meteorack/sdk-react';

export function ModuleAdminBar() {
  return (
    <AdminBar
      siteName="Meteorack"
      logo={<span style={{ fontWeight: 700 }}>M</span>}
      center={<Badge>Admin beta</Badge>}
      actions={
        <>
          <Button variant="ghost" size="sm">
            Docs
          </Button>
          <Button variant="secondary" size="sm">
            Account
          </Button>
        </>
      }
    />
  );
}

PreviousSidebar