Header Element
The Header element provides a specialized container for top-of-page navigation, supporting responsive stickiness and smart scroll behaviors.
Live Preview
Scroll the preview (or use the builder) to see how the header transforms when the page moves down.
Header Preview
Specifications
Headers manage complex scrolling transitions automatically:
- Positioning: Toggle between Static (leaves the view) or Sticky (stays at the top) modes.
- Smart Triggers: Configure the Scrolled State to trigger visual changes after the user starts scrolling.
- Behaviors: Define how the header reacts to scroll direction through Show, Hide on Down, or Hide on Up options.
- Dynamic Width: Support for Floating headers that shrink or add rounded corners once scrolled.
- Theming: Use Default Width and Border thickness to define the header's initial look.
- Children Integration: Nest any collection of Logos, Nav Links, and Buttons directly within.
AI Guidance
How to prompt for Headers:
- Add a sticky header that shrinks when scrolling.
- Create a floating header with rounded corners that hides when scrolling down.
- Insert a simple static header using the primary background color.