Responsive navbar collapse in Bootsrap - Performance & Optimization

Performance: Responsive navbar collapse

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling how navigation menus show or hide on different screen sizes.

Creating a responsive navigation menu that collapses on small screens

Bootsrap

<nav class="navbar navbar-expand-md">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Bootstrap's built-in collapse uses CSS transitions and minimal DOM changes, reducing reflows and improving responsiveness.

📈 Performance GainSingle reflow triggered only on toggle, no continuous reflows on resize

Creating a responsive navigation menu that collapses on small screens

Bootsrap

<nav class="navbar">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>
<script>
  const nav = document.querySelector('nav ul');
  window.addEventListener('resize', () => {
    if(window.innerWidth < 768) {
      nav.style.display = 'none';
    } else {
      nav.style.display = 'block';
    }
  });
</script>

Manually toggling display style on resize triggers multiple reflows and repaints, causing jank and slower interaction.

📉 Performance CostTriggers 1 reflow and repaint on every resize event firing

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual style toggle on resize	Minimal DOM nodes	Multiple reflows on every resize event	Multiple paints causing jank	[X] Bad
Bootstrap collapse component	Uses existing DOM structure	Single reflow on toggle	Smooth paint with CSS transitions	[OK] Good

Rendering Pipeline

The collapse toggle changes element visibility and triggers style recalculation and layout updates only when user interacts, avoiding continuous layout thrashing.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout (reflow) when toggling the menu

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by controlling how navigation menus show or hide on different screen sizes.

Optimization Tips

1Avoid manual style changes on every resize event to prevent multiple reflows.

2Use CSS transitions and framework collapse components to batch style updates.

3Test navbar toggle responsiveness with browser DevTools Performance panel.

Performance Quiz - 3 Questions

What is the main performance problem with manually toggling navbar visibility on every window resize?

A It triggers many reflows and repaints causing slow responsiveness

B It increases the bundle size significantly

C It blocks the main thread for several seconds

D It causes the navbar to be inaccessible to screen readers

DevTools: Performance

How to check: Record a performance profile while resizing the window and toggling the navbar. Look for layout and paint events in the flame chart.

What to look for: Multiple layout recalculations during resize indicate poor performance; a single layout on toggle shows good practice.