Loading

Header

Configure the strip at the top of every page — logo, navigation, search, notifications and per-audience variations.

The site header is the strip at the top of every page — logo, navigation links, user menu, sometimes search and notifications. Customising it well is essential for brand consistency and discoverability.

Customisation Surface

  • Logo: Upload your logo (PNG or SVG); choose size and link target.
  • Primary nav: List of top-level menu items; visible only when permitted.
  • Search: Show the global search bar in the header or hide it.
  • Notifications: Show the bell badge for in-app notifications.
  • User menu: Avatar + dropdown with profile, preferences, sign out.
  • Colours: Background, text, hover, accent — pulled from your theme.
  • Sticky behaviour: Header stays visible on scroll or slides away.
  • Compact mode: Smaller header for screens with limited vertical space.

Per-Audience Header

Different users may need different headers:

  • External customer: Logo, public nav, Sign in / Sign up buttons.
  • Internal staff: Logo, full admin nav, search, notifications, user menu.
  • Marketing visitor: Logo, marketing nav, big CTA button.
  • Mobile: Compact — logo + hamburger menu.

Step-by-Step

  1. Open Architect Panel → Header.
  2. Upload your logo. Use SVG where possible for crisp rendering at all sizes.
  3. Add primary nav items — title, link target, visibility rule (signed in / signed out / group).
  4. Toggle search and notifications.
  5. Choose the user-menu items (profile, billing, settings, sign out).
  6. Set colours from your theme palette.
  7. Test in different states — signed in, signed out, mobile.

Worked Examples

  • SaaS public site: Logo, [Features, Pricing, Docs, Blog], Sign in, Sign up button. Sticky on scroll. No search, no notifications.
  • Logged-in SaaS: Logo, [Dashboard, Customers, Reports, Settings], search, notifications, user avatar menu. Compact mode.
  • White-label tenant: Custom logo and colours pulled from tenant theme; primary nav identical to default; ensures branded consistency.
  • Mobile-first customer app: Compact header with hamburger; primary nav inside the slide-out menu rather than in the header bar.