Header

Overview

The Header component is a reusable site top bar (logo, navigation, actions, burger, etc.). It ships with a base structure and styling, plus a plugin folder for optional behaviors.

Why plugins?

You can keep the header markup clean and enable only the behavior you need (by adding simple data attributes).

Component location

Header files are located in src/components/layout/header. Inside you’ll find:

JS file for component logic (if needed).
HTML file with base header markup.
SCSS file for styling the header.

Plugins live in src/components/layout/header/plugins.

Using the component

Connect the header HTML to your page using <include>. In the starter setup it’s already included by default in shared layout.

Include header markup

<include src="@components/layout/header/header.html"></include>

Note

If your header uses JS/SCSS logic, it will be connected automatically by the template’s component system.

Plugins

Header plugins are optional behaviors you enable via data attributes. The most common one is the Scroll plugin.

Plugin: Scroll

The Scroll plugin manages header state classes while the page scrolls. To enable it, add data-anim-header and data-anim-header-scroll to your <header>.

Enable scroll state


<header data-anim-header data-anim-header-scroll class="header">
	...
</header>

When you scroll more than 1px, the header receives the class --header-scroll.

Custom scroll threshold

To change how many pixels must be scrolled before activating the class, set a value for data-anim-header-scroll.

Set threshold (px)


<header data-anim-header data-anim-header-scroll="500" class="header">
	...
</header>

Auto-hide header on scroll down

To enable “disappearing” header behavior (hide on scroll down, show after a short pause), add data-anim-header-scroll-show. By default, the show delay is 500ms.

Enable auto-hide (default delay)


<header
	data-anim-header
	data-anim-header-scroll
	data-anim-header-scroll-show
	class="header">
	...
</header>

To change the delay, set a value (ms) for data-anim-header-scroll-show.

Auto-hide with custom delay (ms)


<header
	data-anim-header
	data-anim-header-scroll
	data-anim-header-scroll-show="1000"
	class="header">
	...
</header>

Styling plugin states

To customize scroll plugin styles, use: src/components/layout/header/plugins/scroll/scroll.scss

Download

Build clean headers with optional scroll behavior and a plugin-first structure. Download the template and ship faster.

Download Animmaster Vite Template Save your time — start now

Component: Header Site header component + optional scroll plugins