Header & footer library

20 layouts, one library.

Every header and footer in AraSites — 10 of each, fully designed and responsive. Switch between them with the tabs below, then copy the markup straight into any demo.

10header variants
10footer variants
100%responsive
copy& paste ready
01

Classic Pro

Underline-on-hover nav, icon utilities, notification badge and a gradient CTA.

.navbar
02

Centered editorial

Logo dead-centre, split uppercase nav. For fashion, editorial & portfolio.

.hx-editorial
03

Utility topbar

Gradient info strip with contact, socials & language above the main nav.

.hx-topbar
04

Dark SaaS

Deep-navy bar, gradient hairline, dropdown carets, "New" pill and a glowing CTA.

.navbar.hx-dark
05

E-commerce deluxe

Announcement strip, category search, account/wishlist/cart with live counts & a category sub-nav.

.hx-shopsearch
Free express shipping on orders over $75 · 60-day returns
06

Glass over hero

Frosted-glass navbar floating on a rich gradient hero with live content beneath.

.hx-glass
★★★★★ Forbes 5-Star, 2026

A coastline retreat
that stays with you.

07

Mega-menu

A full dropdown panel — icon link columns plus a gradient featured promo card.

.hx-mega-panel
08

App sidebar

Full dashboard chrome — grouped nav, badge counts, upgrade card, profile & a topbar.

.hx-app
Workspace · Overview
New AS

Good morning, Anna

The sidebar stays fixed across every dashboard route — this is the app-style chrome.

09

Floating pill

A detached, fully-rounded nav that hovers over the page — the modern landing-page look.

.hx-pill
10

Minimal mega-brand

Oversized wordmark, a single "Menu" pill — luxury / agency restraint.

.hx-megabrand
01

Mega dark

Newsletter band, four link columns, payment marks & language picker — the full default.

.footer.fx-mega
02

Light & airy

Bright background, a bold brand statement, three columns and a soft newsletter card.

.footer.fx-light
03

Centered minimal

Gradient mark, single nav row, circular socials and a row of quiet trust signals.

.footer.fx-centered
04

Newsletter

Full-bleed gradient, an oversized signup with subscriber count and four mini-columns.

.footer.fx-news
05

App promo

Store buttons and a star rating beside a real phone mockup of the product.

.footer.fx-app
06

Mega sitemap

Six dense link columns, a live status indicator and compliance certification badges.

.footer.fx-sitemap
07

CTA card

A glowing gradient conversion card seated above a quiet single-line credit strip.

.footer.fx-ctawrap
08

Contact + map

Icon contact cards, opening hours and a map panel — built for local businesses.

.footer (contact)
09

Big-logo statement

An oversized wordmark fills the width — the bold, type-led modern footer.

.footer.fx-biglogo
10

Awards & trust row

Recognition badges up top build instant credibility above the columns.

.footer.fx-awards

More building blocks await

80+ components and 16 ready-made sections, in their own libraries.