- No data uploaded
- Instant results
Bootstrap 5 Navbar for Vanilla JS — Glassmorphism
A production-ready glassmorphism navbar: a responsive top navigation bar with a logo, primary links, a sign-in/CTA pair on desktop and a collapsible hamburger menu on mobile. Pick your brand color, toggle dark mode and corner radius — the live preview and the Vanilla JS code update instantly in your browser.
Live component editor
Live preview
<!-- Requires Bootstrap 5.3 CSS + theme.css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css"> -->
<header class="sticky-top top-0 z-1 glass shadow-lg">
<nav class="mw-6xl mx-auto px-4 py-2 d-flex align-items-center justify-content-between gap-4" aria-label="Main">
<a href="#" class="d-flex align-items-center gap-2 fs-5 fw-bold text-decoration-none text-body-emphasis">
<span class="badge rounded-pill bg-brand-subtle text-brand">◆</span> Acme
</a>
<div class="d-none d-md-flex align-items-center gap-4">
<a href="#" class="small fw-medium text-decoration-none text-body">Product</a>
<a href="#" class="small fw-medium text-decoration-none text-body">Solutions</a>
<a href="#" class="small fw-medium text-decoration-none text-body">Pricing</a>
<a href="#" class="small fw-medium text-decoration-none text-body">Docs</a>
</div>
<div class="d-none d-md-flex align-items-center gap-2">
<a href="#" class="btn btn-link link-body-emphasis text-decoration-none fw-semibold rounded-2">Sign in</a>
<a href="#" class="btn btn-brand fw-semibold rounded-2">Get started</a>
</div>
<button type="button" class="btn btn-link link-body-emphasis text-decoration-none fw-semibold rounded-2 d-md-none" aria-controls="mobile-menu" aria-label="Toggle menu" data-toggle="menu">☰</button>
</nav>
<div id="mobile-menu" data-show="menu" hidden>
<div class="d-md-none px-4 pb-3 d-flex flex-column gap-1">
<a href="#" class="btn btn-link link-body-emphasis text-decoration-none fw-semibold rounded-2">Product</a>
<a href="#" class="btn btn-link link-body-emphasis text-decoration-none fw-semibold rounded-2">Solutions</a>
<a href="#" class="btn btn-link link-body-emphasis text-decoration-none fw-semibold rounded-2">Pricing</a>
<a href="#" class="btn btn-link link-body-emphasis text-decoration-none fw-semibold rounded-2">Docs</a>
<a href="#" class="btn btn-brand fw-semibold rounded-2 mt-2">Get started</a>
</div>
</div>
</header>
<script>
(() => {
const state = { menu: false };
const actions = { };
const pair = (s) => s.split(':');
const sync = () => {
document.querySelectorAll('[data-show]').forEach((el) => (el.hidden = !state[el.dataset.show]));
document.querySelectorAll('[data-hide]').forEach((el) => (el.hidden = !!state[el.dataset.hide]));
document.querySelectorAll('[data-when]').forEach((el) => { const [k, v] = pair(el.dataset.when); el.hidden = state[k] !== v; });
document.querySelectorAll('[data-pressed]').forEach((el) => { const [k, v] = pair(el.dataset.pressed); el.setAttribute('aria-pressed', String(state[k] === v)); });
document.querySelectorAll('[data-expanded]').forEach((el) => el.setAttribute('aria-expanded', String(!!state[el.dataset.expanded])));
};
document.addEventListener('click', (e) => {
const t = e.target.closest('[data-toggle],[data-open],[data-close],[data-set],[data-call]');
if (!t) return;
const { toggle, open, close, set, call } = t.dataset;
if (call) actions[call]?.(e);
if (toggle) state[toggle] = !state[toggle];
if (open) state[open] = true;
if (close) state[close] = false;
if (set) { const [k, v] = pair(set); state[k] = v; }
sync();
});
sync();
})();
</script>
/* theme.css — brand color #4f46e5 for Bootstrap 5.3 */
:root { --brand: #4f46e5; --brand-hover: #433cc3; --brand-rgb: 79, 70, 229; --brand-contrast: #ffffff; }
.btn-brand {
--bs-btn-color: var(--brand-contrast); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
--bs-btn-hover-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
--bs-btn-active-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
--bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.text-brand { color: var(--brand) !important; }
.border-brand { border: 2px solid var(--brand) !important; }
.bg-brand-subtle { background-color: rgba(var(--brand-rgb), .12) !important; }
.form-control:focus, .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.overlay { background: rgba(15, 23, 42, .5); backdrop-filter: blur(4px); z-index: 1050; }
.choice[aria-pressed="true"] { border-color: var(--brand) !important; color: var(--brand) !important; box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2); }
.mw-sm { max-width: 24rem; } .mw-md { max-width: 28rem; } .mw-lg { max-width: 32rem; } .mw-xl { max-width: 36rem; }
.mw-2xl { max-width: 42rem; } .mw-4xl { max-width: 56rem; } .mw-6xl { max-width: 72rem; }
.glass { background: rgba(255, 255, 255, .6) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, .6) !important; }
[data-bs-theme="dark"] .glass, [data-bs-theme="dark"].glass { background: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .1) !important; }
.bg-glass-page { background: linear-gradient(135deg, #e0e7ff, #f0f9ff, #ffe4e6); }
[data-bs-theme="dark"] .bg-glass-page, [data-bs-theme="dark"].bg-glass-page { background: linear-gradient(135deg, #020617, #1e1b4b, #0f172a); }
More Bootstrap components for Vanilla JS
All components →- Footer A multi-column site footer with a brand description, three link groups, a newsletter sign-up field and a copyright row
- Hero Section A landing-page hero with an announcement badge, a large headline, supporting copy, primary and secondary calls to action and a row of social-proof stats
- Login Modal A centered sign-in dialog with email and password fields, “remember me”, a forgot-password link and a social sign-in button
- Cookie Consent Banner A GDPR-style cookie banner with equally prominent “Accept all” and “Reject all”, granular analytics/marketing toggles (off by default), stored consent and Google Consent Mode v2 signals
- Feature Grid A marketing section with a centered heading and a responsive grid of six feature cards, each with an icon badge, title and description
- Signup Form A registration card with name, email and password fields, a password hint, a terms-of-service checkbox and a primary call to action
- Pricing Table A three-tier pricing section with a monthly/yearly billing toggle, a highlighted “most popular” plan and feature checklists
- Contact Form A contact card with name, email, a topic selector, a message textarea and a submit button
Install Bootstrap 5 for Vanilla JS
Include Bootstrap 5.3 from the CDN (or npm install bootstrap) and the generated theme.css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css">Use the navbar in Vanilla JS
Paste the markup where the component should appear. The small inline <script> wires up the interactive state with one delegated click listener — no framework needed.
Accessibility & customization
Uses a <nav> landmark with aria-label, the menu button exposes aria-controls and aria-label, and links remain real <a> elements so keyboard and screen-reader navigation work without JavaScript.
Every color, radius and dark-mode choice is baked into plain Bootstrap classes plus a tiny CSS-variable theme file, so the copied code has no runtime dependency on this site. The glass style relies on backdrop-filter, supported in all current browsers; place it over a colorful background for the best effect.
Compatibility
| Item | Details |
|---|---|
| CSS framework | Bootstrap 5.3+ (CSS only) |
| Library | Plain HTML + optional vanilla JS |
| Interactive state | menu |
| Dark mode | Yes — toggle in the editor |
| Style | Glassmorphism (backdrop blur) |
Frequently asked questions
How do I install this Bootstrap navbar in Vanilla JS?
Create a web page, install Bootstrap 5 as shown in the installation section, then paste the generated code. Also save the generated theme.css file.
Can I change the color of the navbar?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the navbar support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the navbar accessible?
Uses a <nav> landmark with aria-label, the menu button exposes aria-controls and aria-label, and links remain real <a> elements so keyboard and screen-reader navigation work without JavaScript.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.