Navbar
Bootstrap Navbar (របារណាវីហ្គេសិន)
Navbar គឺជា component សំខាន់បំផុតនៅក្នុងគេហទំព័រ។ វាមាន brand, links, search forms, dropdowns និង responsive collapse សម្រាប់ mobile។
🏷️ Navbar Structure
| Component | Class | Purpose | Required? |
|---|---|---|---|
| Navbar Container | <nav class="navbar"> |
Main wrapper (semantic HTML5) | ✅ Always |
| Brand/Logo | .navbar-brand |
Company logo or name (large, bold) | ⭐ Recommended |
| Toggler Button | .navbar-toggler |
Hamburger menu button (mobile) | ✅ For responsive |
| Collapse Container | .collapse .navbar-collapse |
Wrapper for collapsible menu | ✅ For responsive |
| Nav List | <ul class="navbar-nav"> |
List of navigation links | ✅ Always |
| Nav Item | <li class="nav-item"> |
Individual link wrapper | ✅ For each link |
| Nav Link | <a class="nav-link"> |
The actual link | ✅ Always |
| Container | <div class="container"> |
Centers navbar content (optional) | ⭐ Recommended |
🎨 Navbar Color Schemes
| Theme | Classes | Text Color | Use Case |
|---|---|---|---|
| Dark Navbar | .navbar-dark .bg-dark |
White text on dark background | Professional, modern look |
| Light Navbar | .navbar-light .bg-light |
Dark text on light background | Clean, minimal design |
| Primary Navbar | .navbar-dark .bg-primary |
White text on blue background | Brand color emphasis |
| Custom Color | .navbar-dark .bg-success/danger/info |
Depends on background color | Thematic designs |
| Transparent | .navbar-dark (no bg class) |
White text, no background | Over hero images/videos |
📱 Responsive Breakpoints
| Class | Breakpoint | Behavior | Best For |
|---|---|---|---|
.navbar-expand-sm |
≥ 576px | Collapse on extra small screens only | Few menu items |
.navbar-expand-md |
≥ 768px | Collapse on small screens and below | Moderate menu items |
.navbar-expand-lg |
≥ 992px | Collapse on medium screens and below | ⭐ Most common (recommended) |
.navbar-expand-xl |
≥ 1200px | Collapse on large screens and below | Many menu items |
.navbar-expand |
Always | Never collapses (always horizontal) | Desktop-only sites |
| (no expand class) | Never | Always collapsed (vertical) | Mobile-only apps |
Responsive Navbar
Navbar responsive ដែលប្រែ hamburger menu លើ mobile និងផ្លាស់អួយជា horizontal menu លើ desktop។
🔧 Navbar Advanced Features
| Feature | Implementation | Use Case |
|---|---|---|
| Dropdown Menu | Add dropdown component inside .nav-item |
Sub-navigation, user menus, categories |
| Active Link | Add .active to current page's .nav-link |
Highlight current page |
| Disabled Link | Add .disabled to .nav-link |
Grayed-out, non-clickable links |
| Logo Image | <img> inside .navbar-brand |
Company branding |
| Alignment | .me-auto (left), .ms-auto (right), .mx-auto (center) |
Position nav items |
| Multi-level Navs | Multiple .navbar-nav groups |
Left nav + right nav (e.g., links left, auth buttons right) |
📍 Navbar Positioning
| Position | Class | Behavior | Notes |
|---|---|---|---|
| Fixed Top | .fixed-top |
Stays at top when scrolling | ⭐ Most common; add padding-top to <body> |
| Fixed Bottom | .fixed-bottom |
Stays at bottom when scrolling | Rare; sometimes used for mobile apps |
| Sticky Top | .sticky-top |
Sticks to top after scrolling past it | Natural flow until scroll, then fixes |
| Static (Default) | (no position class) | Scrolls with page content | No special positioning |
Navbar with Forms
អ្នកអាចបញ្ចូល search forms, buttons, និង input fields ក្នុង navbar។
🔍 Search Form in Navbar
| Element | Classes | Purpose |
|---|---|---|
| Form Container | <form class="d-flex"> |
Flexbox layout for input + button |
| Search Input | <input class="form-control me-2"> |
Text input with right margin |
| Search Button | <button class="btn btn-outline-light"> |
Submit button (color matches navbar theme) |
🎯 Navbar with Buttons & Icons
| Component | Example | Use Case |
|---|---|---|
| CTA Button | <a class="btn btn-primary">Sign Up</a> |
Call-to-action (login, signup, etc.) |
| Icon Links | <a class="nav-link">🛍️ Cart</a> |
Shopping cart, notifications, user profile |
| Badge Notification | <span class="badge bg-danger">3</span> |
Unread count on cart/messages/notifications |
| Button Group | Multiple buttons side-by-side | Login + Sign Up buttons together |
🌐 Navbar Layout Patterns
| Pattern | Structure | Example Sites |
|---|---|---|
| Logo + Links | Brand (left) + Nav items (left/center) | Simple business sites, portfolios |
| Logo + Links + Search | Brand (left) + Nav (left) + Search (right) | E-commerce, content sites |
| Logo + Links + Auth | Brand (left) + Nav (left) + Login/Signup (right) | SaaS apps, web applications |
| Logo + Search + Icons | Brand (left) + Search (center) + Cart/User (right) | Amazon, eBay style e-commerce |
| Centered Logo | Nav (left) + Brand (center) + Auth (right) | Fashion brands, luxury sites |
✅ Navbar Best Practices
| ✅ DO | ❌ DON'T |
|---|---|
| Keep navigation items to 5-7 max | Cram 15+ links in navbar |
Use .navbar-expand-lg for most sites |
Use .navbar-expand-sm with many items (won't fit) |
Add padding-top to body when using .fixed-top |
Let fixed navbar cover content |
| Make logo/brand clickable (link to home) | Use non-clickable brand |
| Test navbar on mobile devices | Assume hamburger menu works without testing |
| Use appropriate color contrast for accessibility | Use .navbar-light with light background |