brand brand
Apps
Pages
Documentation
Quickly Build Applications

Exclusively for webapps Based on Bootstrap

Go Appster

Page Header

Check our page header component.

Basic example

Basic example of page header.

Subheading

Page Title

														
<div class="hk-pg-header">
	<div class="d-flex">
		<div class="avatar avatar-icon avatar-soft-danger d-10 me-3">
			<span class="initial-wrap">
				<span class="feather-icon"><i data-feather="droplet"></i></span>
			</span>
		</div>
		<div class="d-flex flex-wrap justify-content-between flex-1">
			<div class="mb-md-0 mb-2 me-8">
				<div class="pg-subtitle">
					Subheading
				</div>
				<h1 class="pg-title">Page Title</h1>
			</div>
			<div class="pg-header-action-wrap">
				<button class="btn btn-outline-secondary me-3">Secondary</button>
				<button class="btn btn-primary">Primary</button>
			</div>
		</div>
	</div>
</div>
Page header with breadcrumb

You can add breadcrumb with page header component.

Page Title

														
<div class="hk-pg-header">
	<div class="d-flex">
		<div class="avatar avatar-icon avatar-soft-danger d-10 me-3">
			<span class="initial-wrap">
				<span class="feather-icon"><i data-feather="droplet"></i></span>
			</span>
		</div>
		<div class="d-flex flex-wrap justify-content-between flex-1">
			<div class="mb-md-0 mb-2 me-8">
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb">
						<li class="breadcrumb-item"><a href="#">Homepage</a></li>
						<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
					</ol>
				</nav>
				<h1 class="pg-title">Page Title</h1>
			</div>
			<div class="pg-header-action-wrap">
				<button class="btn btn-outline-secondary me-3">Secondary</button>
				<button class="btn btn-primary">Primary</button>
			</div>
		</div>
	</div>
</div>
Page header with text

You can add text line using <p> tag.

Page Title

This is a dummy text for more context.

														
<div class="hk-pg-header">
	<div class="d-flex">
		<div class="avatar avatar-icon avatar-soft-danger d-10 me-3">
			<span class="initial-wrap">
				<span class="feather-icon"><i data-feather="droplet"></i></span>
			</span>
		</div>
		<div class="d-flex flex-wrap justify-content-between flex-1">
			<div class="mb-md-0 mb-2 me-8">
				<h1 class="pg-title">Page Title</h1>
				<p>This is a dummy text for more context.</p>
			</div>
			<div class="pg-header-action-wrap">
				<button class="btn btn-outline-secondary me-3">Secondary</button>
				<button class="btn btn-primary">Primary</button>
			</div>
		</div>
	</div>
</div>
Page header simple

Remove icon avatar for simple page header layout.

Page Title

This is a dummy text for more context.

														
<div class="hk-pg-header">
	<div class="d-flex">
		<div class="d-flex flex-wrap justify-content-between flex-1">
			<div class="mb-md-0 mb-2 me-8">
				<h1 class="pg-title">Page Title</h1>
				<p>This is a dummy text for more context.</p>
			</div>
			<div class="pg-header-action-wrap">
				<button class="btn btn-outline-secondary me-3">Secondary</button>
				<button class="btn btn-primary">Primary</button>
			</div>
		</div>
	</div>
</div>
Page header with stats

Add stats block using .pg-stats-group.

Page Title

Statistics●Statistics Number 
														
<div class="hk-pg-header">
	<div class="d-flex">
		<div class="d-flex flex-wrap justify-content-between flex-1">
			<div class="mb-md-0 mb-2 me-8">
				<h1 class="pg-title">Page Title</h1>
				<div class="pg-stats-group">
					<span class="stats-symbol"><span class="feather-icon"><i data-feather="mail"></i></span></span><span class="stats-title">Statistics</span><span class="stats-dot-sep">&#9679;</span><span class="stats-title">Statistics Number</span>
				</div>
			</div>
			<div class="pg-header-action-wrap">
				<button class="btn btn-outline-secondary me-3">Secondary</button>
				<button class="btn btn-primary">Primary</button>
			</div>
		</div>
	</div>
</div>
Page header with badge

Add the badge element with header to enhance the layout.

Page Title

Badge

This is a dummy text for more context.

														
<div class="hk-pg-header">
	<div class="d-flex">
		<div class="d-flex flex-wrap justify-content-between flex-1">
			<div class="mb-md-0 mb-2 me-8">
				<div class="d-flex align-items-center">
					<h1 class="pg-title">Page Title</h1>
					<span class="badge badge-soft-primary ms-3">Badge</span>
				</div>
				<p>This is a dummy text for more context.</p>
				
			</div>
			<div class="pg-header-action-wrap">
				<button class="btn btn-outline-secondary me-3">Secondary</button>
				<button class="btn btn-primary">Primary</button>
			</div>
		</div>
	</div>
</div>
Page header with tabs

Add the class .pg-header-wth-tab with .hk-pg-header, to add tabs in page header.

Page Title

This is a dummy text for more context.

														
<div class="hk-pg-header pg-header-wth-tab">
	<div class="d-flex">
		<div class="d-flex flex-wrap justify-content-between flex-1">
			<div class="mb-md-0 mb-2 me-8">
				<h1 class="pg-title">Page Title</h1>
				<p>This is a dummy text for more context.</p>
				
			</div>
			<div class="pg-header-action-wrap">
				<button class="btn btn-outline-secondary me-3">Secondary</button>
				<button class="btn btn-primary">Primary</button>
			</div>
		</div>
	</div>
	<ul class="nav nav-line nav-light nav-tabs">
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#">
				<span class="nav-link-text">Tab Link</span>
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link active" data-bs-toggle="tab" href="#">
				<span class="nav-link-text">Active Tab</span>
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#">
				<span class="nav-link-text">Tab Link</span>
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#">
				<span class="nav-link-text">Tab Link</span>
			</a>
		</li>
	</ul>
</div>
Page header dark

Add the class .pg-header-dark with .hk-pg-header, to add dark mode.

Page Title

This is a dummy text for more context.

														
<div class="hk-pg-header pg-header-wth-tab pg-header-dark bg-sky-dark-5 p-3 pb-0 rounded-4">
	<div class="d-flex">
		<div class="d-flex flex-wrap justify-content-between flex-1">
			<div class="mb-md-0 mb-2 me-8">
				<h1 class="pg-title">Page Title</h1>
				<p>This is a dummy text for more context.</p>
				
			</div>
			<div class="pg-header-action-wrap">
				<button class="btn btn-outline-white me-3">Secondary</button>
				<button class="btn btn-primary">Primary</button>
			</div>
		</div>
	</div>
	<ul class="nav nav-line nav-dark nav-tabs">
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#">
				<span class="nav-link-text">Tab Link</span>
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link active" data-bs-toggle="tab" href="#">
				<span class="nav-link-text">Active Tab</span>
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#">
				<span class="nav-link-text">Tab Link</span>
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#">
				<span class="nav-link-text">Tab Link</span>
			</a>
		</li>
	</ul>
</div>
Page header with image

Add the class .pg-header-wth-img with .hk-pg-header, to add image background.

Page Title

This is a dummy text for more context.

														
<div class="hk-pg-header pg-header-wth-tab pg-header-wth-img pg-header-dark bg-sky-dark-5 p-3 pb-0 rounded-4">
	<div class="d-flex">
		<div class="d-flex flex-wrap justify-content-between flex-1">
			<div class="mb-md-0 mb-2 me-8">
				<h1 class="pg-title">Page Title</h1>
				<p>This is a dummy text for more context.</p>
				
			</div>
			<div class="pg-header-action-wrap">
				<button class="btn btn-outline-white me-3">Secondary</button>
				<button class="btn btn-primary">Primary</button>
			</div>
		</div>
	</div>
	<ul class="nav nav-line nav-dark nav-tabs">
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#">
				<span class="nav-link-text">Tab Link</span>
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link active" data-bs-toggle="tab" href="#">
				<span class="nav-link-text">Active Tab</span>
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#">
				<span class="nav-link-text">Tab Link</span>
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#">
				<span class="nav-link-text">Tab Link</span>
			</a>
		</li>
	</ul>
</div>
Jump to