Giới thiệu
Navbar responsive chứa cả menu điều hướng và form đăng nhập inline là pattern phổ biến trên các trang web ít không gian (header gọn). Trên desktop: menu ngang + form float right. Trên mobile: menu dọc, form full-width dưới menu.
Ví dụ hoàn chỉnh - Navbar Responsive với Login Form
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar with Login</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f5f5f5; }
/* Navbar */
.navbar {
background: #272727;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 24px;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-brand { color: #fff; font-size: 20px; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.nav-brand i { color: #b289fd; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-link {
display: flex; align-items: center; gap: 6px;
padding: 16px 20px;
color: #b289fd;
text-decoration: none;
font-size: 15px;
font-weight: 500;
border-radius: 8px;
transition: all 0.2s;
}
.nav-link:hover, .nav-link.active { background: #3a3a3a; color: #fff; }
.nav-link i { font-size: 16px; }
/* Login Form in Navbar */
.nav-login { display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 8px 0; }
.nav-login input {
padding: 10px 14px;
font-size: 14px;
border: 1px solid #444;
border-radius: 6px;
background: #1a1a1a;
color: #fff;
width: 180px;
transition: border-color 0.2s, width 0.3s;
}
.nav-login input:focus { outline: none; border-color: #b289fd; width: 220px; }
.nav-login input::placeholder { color: #666; }
.nav-login button {
padding: 10px 18px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #b289fd;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
}
.nav-login button:hover { background: #9d73f8; }
/* Mobile Menu Toggle */
.menu-toggle { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 12px; }
/* Responsive */
@media (max-width: 768px) {
.menu-toggle { display: block; }
.nav-links {
width: 100%;
flex-direction: column;
display: none;
padding: 16px 0;
border-top: 1px solid #333;
}
.nav-links.open { display: flex; }
.nav-link { width: 100%; justify-content: flex-start; padding: 14px 20px; border-radius: 0; }
.nav-login {
width: 100%;
margin-left: 0;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #333;
flex-direction: column;
gap: 10px;
}
.nav-login input { width: 100%; }
.nav-login button { width: 100%; }
}
</style>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="Main navigation">
<a href="#" class="nav-brand"><i class="fas fa-rocket"></i> MyApp</a>
<button class="menu-toggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="navMenu"><i class="fas fa-bars"></i></button>
<ul class="nav-links" id="navMenu">
<li><a href="#" class="nav-link active"><i class="fas fa-home"></i> Trang chủ</a></li>
<li><a href="#" class="nav-link"><i class="fas fa-sign-in-alt"></i> Đăng nhập</a></li>
<li><a href="#" class="nav-link"><i class="fas fa-user-plus"></i> Đăng ký</a></li>
<li><a href="#" class="nav-link"><i class="fas fa-envelope"></i> Liên hệ</a></li>
<li><a href="#" class="nav-link"><i class="fas fa-info-circle"></i> Thêm thông tin</a></li>
</ul>
<form class="nav-login">
<input type="email" placeholder="Email..." autocomplete="email" aria-label="Email">
<input type="password" placeholder="Mật khẩu..." autocomplete="current-password" aria-label="Mật khẩu">
<button type="submit">Đăng nhập</button>
</form>
</nav>
<main style="padding:40px 20px; max-width:800px; margin:0 auto">
<h1>Nội dung trang</h1>
<p>Navbar trên có form đăng nhập tích hợp. Resize cửa sổ < 768px để xem chế độ mobile.</p>
</main>
<script>
const toggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.nav-links');
toggle.addEventListener('click', () => {
const isOpen = menu.classList.toggle('open');
toggle.setAttribute('aria-expanded', isOpen);
toggle.innerHTML = isOpen ? '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
});
// Close menu on link click (mobile)
menu.querySelectorAll('a').forEach(link => link.addEventListener('click', () => {
menu.classList.remove('open');
toggle.setAttribute('aria-expanded', 'false');
toggle.innerHTML = '<i class="fas fa-bars"></i>';
}));
</script>
</body>
</html>
Kiến trúc Responsive Navbar
- Flexbox:
display: flex; justify-content: space-betweencho layout ngang. - flex-wrap: wrap: Cho phép xuống dòng khi không gian hẹp.
- margin-left: auto trên form login: Đẩy form sang phải trên desktop.
- Mobile-first toggle: JS toggle class
.opentrên.nav-links. - Form login responsive: Desktop inline, Mobile stacked (flex-direction: column).
Accessibility (A11y) Checklist
role="navigation"+aria-labeltrên nav.aria-expanded,aria-controls,aria-labeltrên nút toggle.aria-labeltrên input (vì không có label visible).- Focus order logic: Brand → Links → Login inputs → Button.
- Esc key đóng menu mobile (thêm JS).
Biến thể: Avatar/User Menu (khi đã đăng nhập)
.user-menu { position: relative; }
.user-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: #b289fd; color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 600; cursor: pointer;
}
.user-dropdown {
position: absolute; top: 100%; right: 0; min-width: 200px;
background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: all 0.2s; z-index: 100;
}
.user-menu:hover .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }