RSK World - Header Component | Responsive Header, Mega Menu, Theme Switch, Search | RSK World

Responsive & Mobile Theme & Search Mega Menu & Progress Announcement & Cookie Vanilla JS

Header Component is a responsive header with logo, navigation and CTA. Features: sticky header, shrink on scroll, scroll progress bar, theme switcher (light/dark with localStorage), expandable search overlay, mega menu (Services dropdown on desktop and mobile expand), skip to content, announcement bar (dismissible, persists in localStorage), back-to-top, cookie consent (persists in localStorage), breadcrumbs on inner pages, keyboard shortcuts (/ search, T theme, ? help), print styles, transparent header demo. css: variables.css, style.css, header-advanced.css, footer.css, animations.css, etc. js: config.js, main.js, theme.js, search.js, scroll-progress.js, announcement.js, back-to-top.js, cookie-consent.js, shortcuts.js, breadcrumbs.js. By rskworld.in.

If you find this Header Component project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Header Component

Header & Navigation

style.css: sticky header, logo, nav list, dropdown, mega menu. main.js: sticky + shrink on scroll (is-scrolled, is-shrink), mobile hamburger toggle, mobile mega expand/collapse, desktop mega click + click-outside + Escape. header-advanced.css: search button, theme button, CTA with badge. Responsive breakpoint 768px.

style.css: .header, .header__nav-list, .header__toggle, .header__mega
main.js: updateScrollState(), openMenu/closeMenu, services dropdown
header-advanced.css: skip link, progress bar, search overlay, theme
Keyboard: / search, T theme, ? shortcuts, Esc close

Project Structure & Files

Root: index.html (main demo), demo-transparent.html, page-services.html (breadcrumbs). css: variables.css, style.css, animations.css, header-advanced.css, footer.css, announcement.css, back-to-top.css, cookie-consent.css, breadcrumbs.css, shortcuts-help.css, demo-transparent.css, print.css. js: config.js, main.js, theme.js, search.js, scroll-progress.js, announcement.js, back-to-top.js, cookie-consent.js, shortcuts.js, breadcrumbs.js. No build step. Open index.html or serve folder.

index.html, demo-transparent.html, page-services.html
No build step – open index.html or static server
DM Sans (Google Fonts)
Zero dependencies; vanilla HTML, CSS, JavaScript

Themes & Animations

Theme switcher via theme.js: light/dark persisted in localStorage (header-component-theme). variables.css: body.theme-light overrides for header, search overlay, mega. animations.css: header-fade-in, header-slide-down, header-scale-in; prefers-reduced-motion respected. CSS variables for --header-bg, --accent, --header-height, etc.

theme.js: applyTheme(), getStored/setStored
variables.css: :root dark, body.theme-light overrides
prefers-reduced-motion: reduce respected
Header .is-scrolled, .is-shrink states

Search & Overlays

search.js: full-screen search overlay, open/close, Escape, click backdrop, auto-focus input. shortcuts.js: / opens search when not in input. header-advanced.css: .search-overlay, .search-overlay__input. Cookie consent and announcement bars with localStorage persistence.

search.js: open(), close(), trigger/closeBtn/input
shortcuts.js: / key opens search, ? shows help overlay
cookie-consent.js, announcement.js: localStorage persist
/ or search button to open search

Sections & Pages

index.html: Announcement, skip link, scroll progress, header, main (hero + sections #home #about #services #portfolio #contact), footer, back-to-top, cookie consent, search overlay. page-services.html: inner page with breadcrumbs (static or data-breadcrumbs). demo-transparent.html: header--transparent over hero.

index.html – all sections with id for scroll/skip target
main.js: mobile links close menu on click
Scroll threshold 60px (sticky), 80px (shrink)
Accessibility: skip link #main-content, aria-expanded, keyboard

What You Get

Static HTML/CSS/JS: index.html, demo-transparent.html, page-services.html, variables.css, style.css, header-advanced.css, footer.css, animations.css, feature CSS/JS for announcement, back-to-top, cookie consent, breadcrumbs, shortcuts, print. config.js with HEADER_CONFIG (navItems, features). README.md, USAGE.md. No build step. Open index.html or serve folder.

Complete source – all HTML, CSS and JS files in header-component
No build step – open index.html or static server
README.md and USAGE.md with features and customization
Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Usage

Open index.html or header-component/index.html. Use header: toggle mobile menu, theme, search, mega menu. Press / for search, T for theme, ? for shortcuts. Customize via js/config.js (features, navItems) and css/variables.css (colors, header height). See USAGE.md.

index.html – main page with full header and sections
config.js and variables.css: config and design tokens
Accessibility: skip link, reduced motion, ARIA
Author: RSK World | rskworld.in

Project Features

Responsive header, logo, sticky + shrink on scroll, scroll progress bar, theme switch (light/dark), search overlay, mega menu (desktop + mobile expand), skip link, announcement bar, back-to-top, cookie consent, breadcrumbs, keyboard shortcuts (/ T ?), print styles, transparent header demo. All vanilla JS, no frameworks.

Core: sticky header, logo, nav, CTA, mobile menu, mega menu
Advanced: theme, search overlay, scroll progress, header shrink
Announcement, back-to-top, cookie consent, breadcrumbs
Keyboard shortcuts, print.css, transparent demo

Credits & Acknowledgments

Header Component by RSK World. Responsive header with logo, navigation, mega menu, search, theme switch, scroll progress and extra features for learning header design and vanilla JS UI components.

Header Component – responsive, sticky, mega menu, theme, search, progress
RSK World – Project creator and educational platform
Author: Molla Samser (Founder - RSK World)
Website: https://rskworld.in
Email: help@rskworld.in | +91 93305 39277
© 2026 RSK World. All rights reserved.