Topbar

Overview

Topbar provides a horizontal navigation header with three content slots: start (branding/logo), center (search or navigation), and end (user menu/actions). It supports configurable height and an optional bottom border.

Usage

import { Topbar, TopbarMenu } from "@leanicon/web-builder-library/saas";

<Topbar
  start={<span className="font-semibold">Acme Inc.</span>}
  center={<div>Search...</div>}
  end={<TopbarMenu trigger={<button>User</button>} items={menuItems} />}
/>;

Variants

Default

Without Border

Minimal

Tall Height

Dark