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
- Open Architect Panel → Header.
- Upload your logo. Use SVG where possible for crisp rendering at all sizes.
- Add primary nav items — title, link target, visibility rule (signed in / signed out / group).
- Toggle search and notifications.
- Choose the user-menu items (profile, billing, settings, sign out).
- Set colours from your theme palette.
- 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.