Developer Docs

Quick reference guides with props tables, usage examples, and best practices for rapid development

Components

Form Components

Display Components

Feedback Components

Layout Components

Navigation Components

Components/Docs/Header

Header

Flexible page header component with gradient text effects and customizable layout

Header

A two-part title component with optional tagline, designed for neighborhood and community pages. Features smart defaults with "Welcome, neighbor" greeting and styled taglines.

Quick Example

Welcome, neighbor

Enter or join your community in seconds

🔧 Props Reference

All available props for the Header component with their types, defaults, and descriptions:

Prop	Type	Default	Description
spanOne	string \| van.State \| HTMLElement	'Welcome, '	First part of the title
spanTwo	string \| van.State \| HTMLElement	'neighbor'	Second part of the title (styled with sunrise color)
tagLine	string \| van.State \| HTMLElement	'Enter or join...'	Optional tagline below the title
containerClass	string	'text-center mb-6 space-y-3'	Container CSS classes
class	string	''	h1 element CSS classes
headerSpanClass	string	''	Inner span wrapper CSS classes
spanOneClass	string	''	First span CSS classes
spanTwoClass	string	'text-sunrise font-medium...'	Second span CSS classes (styled)
tagLineClass	string	'text-sm text-secondary'	Tagline CSS classes

💻 Default Header

Uses smart defaults: "Welcome, neighbor" with community tagline.

Welcome, neighbor

Enter or join your community in seconds

Header()

// Renders:
// "Welcome, neighbor"
// "Enter or join your community in seconds"

👋 Custom Greeting

Customize the greeting with user names or dynamic content using reactive state.

With User Name

Hello, Sarah

Enter or join your community in seconds

Header({
  spanOne: 'Hello, ',
  spanTwo: 'Sarah'
})

With Reactive State

Welcome back, [object Object]

Enter or join your community in seconds

const userName = van.state('neighbor');

Header({
  spanOne: 'Welcome back, ',
  spanTwo: userName
})

// Update dynamically:
userName.val = 'Sarah';

🏷️ Custom Tagline

Customize or remove the tagline to match your page context.

Simple String

Discover your neighborhood

Connect with local services and neighbors

Header({
  spanOne: 'Discover ',
  spanTwo: 'your neighborhood',
  tagLine: 'Connect with local services and neighbors'
})

No Tagline

Welcome home

Header({
  spanOne: 'Welcome ',
  spanTwo: 'home',
  tagLine: ''  // No tagline rendered
})

🎨 Custom Styling

Override default styles for alignment, sizing, and colors to match your design.

Left-Aligned Header

Welcome, neighbor

Enter or join your community in seconds

Header({
  containerClass: 'text-left mb-6 space-y-2'
})

Custom Title Styling

Find your community

Enter or join your community in seconds

Header({
  spanOne: 'Find your ',
  spanTwo: 'community',
  class: 'text-4xl font-bold',
  spanTwoClass: 'text-ocean font-bold ml-1'
})

🧠 Smart Class Merging

Header uses filterClassName for intelligent class merging. When you provide custom classes, defaults are filtered out to avoid conflicts.

// Default spanTwoClass: 'text-sunrise font-medium ml-1 truncate max-w-50'

// Override with custom class:
Header({
  spanTwo: 'very-long-username-that-needs-truncation',
  spanTwoClass: 'text-ocean'  // Replaces default completely
})

// filterClassName removes conflicting defaults:
// Result: 'text-ocean' (not 'text-sunrise text-ocean')

🎯 Common Use Cases

Real-world examples showing how to use Header in different contexts.

1. Landing Page

// Generic welcome header
Header()

// Or custom:
Header({
  spanOne: 'Your ',
  spanTwo: 'digital neighborhood',
  tagLine: 'Where neighbors help neighbors'
})

2. Dashboard Header

const user = van.state({ name: 'Sarah' });

Header({
  spanOne: 'Welcome back, ',
  spanTwo: () => user.val.name,
  tagLine: () => `Last login: ${user.val.lastLogin}`
})

3. Community Page

const community = van.state('Downtown');

Header({
  spanOne: '',
  spanTwo: community,
  tagLine: 'Your local community hub'
})

4. Service Category

Header({
  spanOne: 'Browse ',
  spanTwo: 'Home Services',
  tagLine: 'Find plumbers, electricians, and more',
  containerClass: 'text-left mb-8'
})

✅ Best Practices

Follow these guidelines for optimal Header component usage:

✓ Do This

✓Use default for generic welcome headers

✓Pass reactive state for dynamic user names

✓Keep spanTwo short (truncates with max-w-50)

✓Use filterClassName for custom styling

✓Override tagLine for context-specific messaging

✓Set tagLine="" to hide it completely

✗ Avoid This

✗Use for page titles (use h1 directly)

✗Put long text in spanTwo (truncates)

✗Forget trailing space in spanOne

✗Override without understanding filterClassName

✗Use for navigation headers

✗Mix with NavigationHeader component

⭐ Key Features

Two-part title component with smart defaults and intelligent class merging:

★

Two-Part Title

Separate styling for spanOne and spanTwo

★

Smart Defaults

"Welcome, neighbor" with community tagline

★

Reactive State

VanJS state support for dynamic content

★

Auto Truncation

spanTwo truncates with max-w-50 by default

★

filterClassName

Intelligent class merging prevents conflicts

★

Flexible Content

Strings, HTMLElements, or reactive state

🔄 vs NavigationHeader

Header and NavigationHeader are different components:

Header (this component)

• Two-part title with optional tagline

• For page headers and hero sections

• No navigation or menu functionality

• Examples: Landing pages, dashboards, section headers

NavigationHeader

• Top navigation bar with logo and menu

• Includes navigation links and actions

• Mobile responsive drawer

• Examples: Site-wide navigation, app header

Explore More Components

Browse other component categories