Back to search
178Views
1Likes
0Downloads
Code · Live Preview
Componenthtml
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar — Formfield</title>
<!-- Fonts: matching footer exactly -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500;600&display=swap"
rel="stylesheet"
/>
<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
serif: ["DM Serif Display", "serif"],
sans: ["DM Sans", "sans-serif"],
},
colors: {
ink: "#111110",
"ink-light": "#1e1d1b",
"off-white": "#f5f4f1",
"warm-muted": "#888580",
"warm-border": "#2a2927",
"warm-mid": "#e8e7e4",
"warm-bg": "#f5f4f1",
},
},
},
};
</script>
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<!-- Link CSS file -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- ══════════════════════════════════════════
NAVBAR
══════════════════════════════════════════ -->
<nav
id="navbar"
class="fixed top-0 left-0 right-0 z-50 bg-off-white/90"
style="border-bottom: 1px solid #e8e7e4"
>
<div class="max-w-[1280px] mx-auto px-6 lg:px-10">
<div class="flex items-center justify-between h-[64px]">
<!-- Logo -->
<a
href="#"
id="logo"
class="flex items-center gap-2 flex-shrink-0 no-underline"
>
<div
class="w-7 h-7 flex items-center justify-center rounded-[3px]"
style="background: #111110"
>
<span class="font-serif text-[14px] text-off-white leading-none"
>F</span
>
</div>
<span
class="font-serif text-[19px] text-ink tracking-tight leading-none"
>
Formfield<span style="color: #888580">.</span>
</span>
</a>
<!-- Desktop nav -->
<div id="desktop-nav" class="hidden lg:flex items-center gap-7">
<!-- Home -->
<a href="#" class="nav-link active">Home</a>
<!-- About -->
<a href="#" class="nav-link">About</a>
<!-- Services dropdown -->
<div class="relative" id="dd-services-wrap">
<button
class="nav-link"
id="dd-services-btn"
aria-expanded="false"
>
Services
<svg
class="nav-chevron"
id="dd-services-chevron"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
>
<path
d="M2 4.5L6 8L10 4.5"
stroke="#888580"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<div
class="dropdown-panel"
id="dd-services"
style="min-width: 240px"
>
<div class="drop-label">What we do</div>
<!-- Design → nested -->
<div class="has-sub drop-item">
<div class="drop-item-left">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<rect
x="1"
y="1"
width="12"
height="12"
rx="2"
stroke="currentColor"
stroke-width="1.2"
/>
<path
d="M4 7h6M7 4v6"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
Design
</div>
<svg
width="10"
height="10"
viewBox="0 0 10 10"
fill="none"
style="opacity: 0.4"
>
<path
d="M3 2L7 5L3 8"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
/>
</svg>
<div class="sub-panel">
<a href="#" class="sub-item">UI / UX Design</a>
<a href="#" class="sub-item">Brand Identity</a>
<a href="#" class="sub-item">Motion Design</a>
<a href="#" class="sub-item">Print & Collateral</a>
</div>
</div>
<!-- Development → nested -->
<div class="has-sub drop-item">
<div class="drop-item-left">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<polyline
points="3,5 1,7 3,9"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<polyline
points="11,5 13,7 11,9"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<line
x1="8.5"
y1="2"
x2="5.5"
y2="12"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
Development
</div>
<svg
width="10"
height="10"
viewBox="0 0 10 10"
fill="none"
style="opacity: 0.4"
>
<path
d="M3 2L7 5L3 8"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
/>
</svg>
<div class="sub-panel">
<a href="#" class="sub-item">Web Development</a>
<a href="#" class="sub-item">Mobile Apps</a>
<a href="#" class="sub-item">E-commerce</a>
<a href="#" class="sub-item">API & Backend</a>
</div>
</div>
<!-- Marketing -->
<a href="#" class="drop-item">
<div class="drop-item-left">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<polyline
points="1,10 4,6 7,8 10,3 13,5"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Marketing & SEO
</div>
</a>
<!-- Strategy -->
<a href="#" class="drop-item">
<div class="drop-item-left">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<circle
cx="7"
cy="7"
r="5.5"
stroke="currentColor"
stroke-width="1.2"
/>
<circle
cx="7"
cy="7"
r="2.5"
stroke="currentColor"
stroke-width="1.2"
/>
<circle cx="7" cy="7" r="0.8" fill="currentColor" />
</svg>
Strategy & Consulting
</div>
</a>
<div class="drop-divider"></div>
<a
href="#"
class="drop-item"
style="color: #111110; font-weight: 500"
>
<div class="drop-item-left">View all services</div>
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
style="opacity: 0.5"
>
<path
d="M2 6h8M7 3l3 3-3 3"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
</div>
</div>
<!-- Blogs dropdown -->
<div class="relative" id="dd-blogs-wrap">
<button class="nav-link" id="dd-blogs-btn" aria-expanded="false">
Blogs
<svg
class="nav-chevron"
id="dd-blogs-chevron"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
>
<path
d="M2 4.5L6 8L10 4.5"
stroke="#888580"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<div
class="dropdown-panel"
id="dd-blogs"
style="min-width: 200px"
>
<div class="drop-label">Read</div>
<a href="#" class="drop-item">
<div class="drop-item-left">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<rect
x="1.5"
y="1.5"
width="11"
height="11"
rx="2"
stroke="currentColor"
stroke-width="1.2"
/>
<path
d="M4 5h6M4 7.5h4"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
Latest Articles
</div>
</a>
<a href="#" class="drop-item">
<div class="drop-item-left">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<circle
cx="7"
cy="7"
r="5.5"
stroke="currentColor"
stroke-width="1.2"
/>
<path
d="M7 4v3l2 1.5"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
</svg>
Case Studies
</div>
</a>
<a href="#" class="drop-item">
<div class="drop-item-left">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<path
d="M7 1L8.5 5h4L9.5 7.5 11 12 7 9.5 3 12 4.5 7.5 1.5 5h4L7 1Z"
stroke="currentColor"
stroke-width="1.2"
stroke-linejoin="round"
/>
</svg>
Insights
</div>
</a>
</div>
</div>
</div>
<!-- Right: CTA + hamburger -->
<div class="flex items-center gap-3">
<a href="#" id="cta-btn" class="cta-btn">
Contact / Enquiry <span class="cta-arrow">→</span>
</a>
<button
id="hamburger"
class="lg:hidden flex flex-col justify-center gap-[5px] w-9 h-9 rounded-[4px] border border-warm-border bg-transparent items-center"
aria-label="Toggle menu"
aria-expanded="false"
>
<span class="ham-line"></span>
<span class="ham-line"></span>
<span class="ham-line"></span>
</button>
</div>
</div>
</div>
<!-- ── Mobile menu ── -->
<div
id="mobile-menu"
class="lg:hidden"
style="border-top: 1px solid #e8e7e4; background: #f5f4f1"
>
<div class="max-w-[1280px] mx-auto px-6 py-3 flex flex-col gap-1">
<!-- Home -->
<a
href="#"
class="flex items-center gap-3 px-3 py-2.5 rounded-[4px] text-sm font-medium text-ink"
style="background: #e8e7e4"
>
Home
</a>
<!-- About -->
<a
href="#"
class="flex items-center gap-3 px-3 py-2.5 rounded-[4px] text-sm font-normal text-warm-muted hover:bg-warm-mid hover:text-ink transition-colors"
>
About
</a>
<!-- Services accordion -->
<div>
<button
class="mob-acc-btn w-full flex items-center justify-between px-3 py-2.5 rounded-[4px] text-sm font-normal text-warm-muted hover:bg-warm-mid hover:text-ink transition-colors text-left"
data-target="mob-services"
>
Services
<svg class="mob-chevron w-3 h-3" viewBox="0 0 12 12" fill="none">
<path
d="M2 4.5L6 8L10 4.5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
</button>
<div class="mob-content pl-3" id="mob-services">
<div class="flex flex-col gap-0.5 py-1">
<!-- Design sub-accordion -->
<button
class="mob-acc-btn w-full flex items-center justify-between px-3 py-2 rounded-[4px] text-[13px] font-normal text-warm-muted hover:bg-warm-mid hover:text-ink transition-colors text-left"
data-target="mob-design"
>
Design
<svg
class="mob-chevron w-3 h-3"
viewBox="0 0 12 12"
fill="none"
>
<path
d="M2 4.5L6 8L10 4.5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
</button>
<div class="mob-content pl-3" id="mob-design">
<div class="flex flex-col gap-0.5 py-1">
<a
href="#"
class="block px-3 py-1.5 text-[13px] text-warm-muted hover:text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>UI / UX Design</a
>
<a
href="#"
class="block px-3 py-1.5 text-[13px] text-warm-muted hover:text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>Brand Identity</a
>
<a
href="#"
class="block px-3 py-1.5 text-[13px] text-warm-muted hover:text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>Motion Design</a
>
<a
href="#"
class="block px-3 py-1.5 text-[13px] text-warm-muted hover:text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>Print & Collateral</a
>
</div>
</div>
<!-- Development sub-accordion -->
<button
class="mob-acc-btn w-full flex items-center justify-between px-3 py-2 rounded-[4px] text-[13px] font-normal text-warm-muted hover:bg-warm-mid hover:text-ink transition-colors text-left"
data-target="mob-dev"
>
Development
<svg
class="mob-chevron w-3 h-3"
viewBox="0 0 12 12"
fill="none"
>
<path
d="M2 4.5L6 8L10 4.5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
</button>
<div class="mob-content pl-3" id="mob-dev">
<div class="flex flex-col gap-0.5 py-1">
<a
href="#"
class="block px-3 py-1.5 text-[13px] text-warm-muted hover:text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>Web Development</a
>
<a
href="#"
class="block px-3 py-1.5 text-[13px] text-warm-muted hover:text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>Mobile Apps</a
>
<a
href="#"
class="block px-3 py-1.5 text-[13px] text-warm-muted hover:text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>E-commerce</a
>
<a
href="#"
class="block px-3 py-1.5 text-[13px] text-warm-muted hover:text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>API & Backend</a
>
</div>
</div>
<a
href="#"
class="block px-3 py-2 text-[13px] text-warm-muted hover:text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>Marketing & SEO</a
>
<a
href="#"
class="block px-3 py-2 text-[13px] text-warm-muted hover:text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>Strategy & Consulting</a
>
<div
style="height: 1px; background: #e8e7e4; margin: 4px 0"
></div>
<a
href="#"
class="block px-3 py-2 text-[13px] font-medium text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>View all services →</a
>
</div>
</div>
</div>
<!-- Blogs accordion -->
<div>
<button
class="mob-acc-btn w-full flex items-center justify-between px-3 py-2.5 rounded-[4px] text-sm font-normal text-warm-muted hover:bg-warm-mid hover:text-ink transition-colors text-left"
data-target="mob-blogs"
>
Blogs
<svg class="mob-chevron w-3 h-3" viewBox="0 0 12 12" fill="none">
<path
d="M2 4.5L6 8L10 4.5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
</button>
<div class="mob-content pl-3" id="mob-blogs">
<div class="flex flex-col gap-0.5 py-1">
<a
href="#"
class="block px-3 py-2 text-[13px] text-warm-muted hover:text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>Latest Articles</a
>
<a
href="#"
class="block px-3 py-2 text-[13px] text-warm-muted hover:text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>Case Studies</a
>
<a
href="#"
class="block px-3 py-2 text-[13px] text-warm-muted hover:text-ink hover:bg-warm-mid rounded-[4px] transition-colors"
>Insights</a
>
</div>
</div>
</div>
<!-- mobile CTA -->
<div class="pt-2 pb-1">
<a href="#" class="cta-btn w-full justify-center">
Contact / Enquiry <span class="cta-arrow">→</span>
</a>
</div>
</div>
</div>
</nav>
<!-- ══════════════════════════════════════════
DEMO HERO
══════════════════════════════════════════ -->
<div class="hero">
<p
class="text-[10px] uppercase tracking-[1.8px] text-warm-muted font-medium mb-5"
>
Creative / Digital Agency
</p>
<h1
id="hero-title"
class="font-serif text-[clamp(2.2rem,5vw,3.5rem)] text-ink leading-tight mb-5 max-w-2xl"
style="letter-spacing: -0.02em"
>
We build digital products<br />that people actually use.
</h1>
<p
id="hero-sub"
class="text-[15px] leading-relaxed text-warm-muted max-w-md mb-8"
>
A well-established studio doing serious work in design, development, and
digital strategy.
</p>
<div id="hero-btns" class="flex flex-wrap gap-3 justify-center">
<a href="#" class="cta-btn text-[14px] px-6 py-[11px]">
Start a Project <span class="cta-arrow">→</span>
</a>
<a
href="#"
class="inline-flex items-center gap-2 px-6 py-[11px] rounded-[4px] text-[14px] font-normal text-warm-muted border hover:text-ink hover:border-warm-border transition-colors"
style="border-color: #e8e7e4; background: #fff"
>
View our work
</a>
</div>
</div>
<!-- filler -->
<div class="max-w-2xl mx-auto px-6 py-24 text-center">
<h2
class="font-serif text-[2rem] text-ink mb-4"
style="letter-spacing: -0.01em"
>
Scroll to see the navbar respond
</h2>
<p class="text-[15px] leading-relaxed text-warm-muted">
The border transitions on scroll. Try clicking Services and Blogs on
desktop — only one opens at a time. On mobile the hamburger opens a full
accordion menu.
</p>
</div>
<div class="h-screen flex items-center justify-center">
<p class="text-[12px] uppercase tracking-[1.8px] text-warm-muted">
— End of demo —
</p>
</div>
<!-- Link JavaScript file -->
<script src="app.js"></script>
</body>
</html>Detecting libraries...
Component details
Overview, install command, dependencies, and project links.
A clean, professional navigation bar built with pure HTML, Tailwind CSS, and vanilla JavaScript — powered by GSAP for smooth entrance animations. Features a company logo on the left using DM Serif Display, nav links in DM Sans, a multi-level Services dropdown with nested submenus for Design and Development, a Blogs dropdown, and a solid dark CTA button that stays visible at all times across every screen size. Only one dropdown can be open at a time — opening a new one automatically closes the previous. The navbar transitions from transparent to a frosted warm background on scroll. On mobile and tablet, a hamburger menu opens a full accordion with nested sub-accordions, each following the same one-open rule. Typography, spacing, and color tokens follow a consistent warm monochrome system — #111110 ink, #f5f4f1 off-white, #888580 muted gray — no gradients, no colored accents, nothing that looks like a template.
Added Apr 14, 2026
Discussion
Feedback, implementation tips, and usage notes.
0 threads
Comments
Sign in to join the conversation