Syllabus

On this page

CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation

Badar KhalilUpdated September 30, 2026 7 min read

A CSS navbar is the main navigation area of a website. It holds the logo, links and sometimes actions like search or login. A dropdown menu reveals extra links when the user activates a parent item. Navigation is one of the most used UI components, so it must be fast, responsive and fully usable with keyboard and screen readers.

Focus keyword: CSS navbar dropdown. Related trending keywords: responsive navbar CSS, sticky header, mobile hamburger menu, accessible dropdown menu, :focus-within, aria-expanded, details summary menu, Popover API menu.

Wrap primary navigation in <nav aria-label='Main'>. If there are multiple navs on a page, give each a different label.
Use a list: <ul><li><a href>. It gives screen reader users the item count.
Mark the current page with aria-current='page' and style it with [aria-current='page'].
Provide a skip link (Skip to main content) as the first focusable element.

Building the layout

Use flexbox: display: flex; align-items: center; gap: 16px; and push groups apart with margin-inline-start: auto. For a sticky header use position: sticky; top: 0; z-index: 100; and a background color so content does not show through. Use scroll-padding-top on html so anchor links are not hidden behind it.

On small screens, collapse links behind a menu button. The button must be a real <button> with aria-expanded and aria-controls, and JavaScript toggles the state. Design mobile first: show the menu button by default and reveal the inline links with a min-width media query or container query.

CSS-only with :hover and :focus-within: quick, works for keyboard because :focus-within keeps it open while focus is inside. Weakness: hover-only menus are hard on touch devices and pointer users can lose the menu if there is a gap between the trigger and the panel.
Disclosure pattern (recommended): a <button aria-expanded> toggles a list of links. Close on Escape and when focus or clicks move outside. This is simple and accessible.
details and summary: built-in toggle behavior with no JavaScript. Style the marker and position the panel absolutely.
Popover API: use popover and popovertarget for a top-layer panel with light dismiss. Pair with anchor positioning as progressive enhancement.

Avoid role='menu' for site navigation. That role expects application-style arrow key behavior and often makes website navigation worse. A list of links inside a disclosure is usually the right choice.

Make the parent position: relative and the panel position: absolute; top: 100%; left: 0; min-width: 200px. Add z-index, a shadow and rounded corners. Use a small padding-top or a pseudo-element bridge so the pointer does not cross a dead gap.

Keyboard and focus checklist

Tab moves through links and the dropdown button in a logical order.
Enter and Space activate the button.
Escape closes the dropdown and returns focus to the button.
Focus is always visible with :focus-visible.
Hidden panels must not be focusable: use hidden, display: none or visibility: hidden.

Performance and motion

Animate opacity and transform, not height or top. Use @starting-style with transition-behavior: allow-discrete for entry and exit animation of display. Respect prefers-reduced-motion.

Quick summary

Use semantic nav and lists, a flex layout, a mobile menu button with aria-expanded and a disclosure dropdown that supports keyboard and outside click. That produces a reliable CSS navbar dropdown.

Try it Yourself HTML

<style>
  * { box-sizing: border-box; }
  body { margin: 0; font-family: system-ui, sans-serif; }
  .nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 20px; padding: 0 20px; height: 60px; background: #0f172a; color: #fff; }
  .logo { font-weight: 800; font-size: 20px; color: #fff; text-decoration: none; }
  .nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
  .nav a { color: #cbd5e1; text-decoration: none; padding: 8px 12px; border-radius: 8px; }
  .nav a:hover { background: #1e293b; color: #fff; }
  .nav a[aria-current='page'] { background: #4f46e5; color: #fff; }
  .nav a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  .cta { margin-inline-start: auto; background: #10b981; color: #fff !important; font-weight: 600; }
  main { height: 160vh; padding: 20px; }
</style>
<nav class='nav' aria-label='Main'>
  <a class='logo' href='#'>Brand</a>
  <ul>
    <li><a href='#' aria-current='page'>Home</a></li>
    <li><a href='#'>Courses</a></li>
    <li><a href='#'>Blog</a></li>
    <li><a href='#'>About</a></li>
  </ul>
  <a class='cta' href='#'>Sign up</a>
</nav>
<main>Scroll: the navbar stays at the top (position: sticky).</main>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font-family: system-ui, sans-serif; min-height: 260px; }
  .bar { display: flex; gap: 12px; padding: 12px 20px; background: #1e293b; }
  .dd { position: relative; }
  .dd > a { display: block; padding: 10px 14px; color: #fff; text-decoration: none; border-radius: 8px; }
  .dd > a:hover { background: #334155; }
  .panel { position: absolute; top: 100%; left: 0; min-width: 200px; padding: 8px; margin: 0; list-style: none; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
  .dd:hover .panel, .dd:focus-within .panel { opacity: 1; visibility: visible; transform: none; }
  .panel a { display: block; padding: 10px 12px; color: #0f172a; text-decoration: none; border-radius: 8px; }
  .panel a:hover, .panel a:focus-visible { background: #eef2ff; outline: none; }
  @media (prefers-reduced-motion: reduce) { .panel { transition: none; transform: none; } }
</style>
<div class='bar'>
  <div class='dd'>
    <a href='#'>Products</a>
    <ul class='panel'>
      <li><a href='#'>Analytics</a></li>
      <li><a href='#'>Automation</a></li>
      <li><a href='#'>Security</a></li>
    </ul>
  </div>
  <div class='dd'><a href='#'>Company</a></div>
</div>
<p style='padding:20px'>Hover, or Tab into the menu. :focus-within keeps it open for keyboard users.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font-family: system-ui, sans-serif; min-height: 280px; }
  .bar { display: flex; padding: 12px 20px; background: #0f172a; }
  .dd { position: relative; }
  .trigger { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; border-radius: 8px; background: transparent; color: #fff; font: 600 15px system-ui; cursor: pointer; }
  .trigger:hover, .trigger[aria-expanded='true'] { background: #1e293b; }
  .trigger:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  .trigger::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
  .trigger[aria-expanded='true']::after { transform: rotate(225deg); }
  .menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; margin: 0; padding: 8px; list-style: none; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
  .menu[hidden] { display: none; }
  .menu a { display: block; padding: 10px 12px; border-radius: 8px; color: #0f172a; text-decoration: none; }
  .menu a:hover, .menu a:focus-visible { background: #eef2ff; outline: none; }
</style>
<div class='bar'>
  <div class='dd' id='dd'>
    <button class='trigger' id='t' aria-expanded='false' aria-controls='m'>Resources</button>
    <ul class='menu' id='m' hidden>
      <li><a href='#'>Documentation</a></li>
      <li><a href='#'>Tutorials</a></li>
      <li><a href='#'>Community</a></li>
    </ul>
  </div>
</div>
<script>
  var t = document.getElementById('t'), m = document.getElementById('m'), dd = document.getElementById('dd');
  function setOpen(open) { t.setAttribute('aria-expanded', String(open)); m.hidden = !open; }
  t.addEventListener('click', function () { setOpen(t.getAttribute('aria-expanded') !== 'true'); });
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !m.hidden) { setOpen(false); t.focus(); } });
  document.addEventListener('click', function (e) { if (!dd.contains(e.target)) setOpen(false); });
  dd.addEventListener('focusout', function (e) { if (!dd.contains(e.relatedTarget)) setOpen(false); });
</script>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  * { box-sizing: border-box; }
  body { margin: 0; font-family: system-ui, sans-serif; }
  .nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #0f172a; color: #fff; flex-wrap: wrap; }
  .burger { padding: 10px 14px; border: 1px solid #475569; border-radius: 8px; background: transparent; color: #fff; font: 600 14px system-ui; cursor: pointer; }
  .links { display: none; flex-direction: column; width: 100%; list-style: none; margin: 10px 0 0; padding: 0; }
  .links.open { display: flex; }
  .links a { display: block; padding: 12px; color: #e2e8f0; text-decoration: none; border-radius: 8px; }
  .links a:hover { background: #1e293b; }
  @media (min-width: 640px) {
    .burger { display: none; }
    .links { display: flex; flex-direction: row; width: auto; margin: 0; }
  }
</style>
<nav class='nav' aria-label='Main'>
  <strong>Brand</strong>
  <button class='burger' id='b' aria-expanded='false' aria-controls='l'>Menu</button>
  <ul class='links' id='l'>
    <li><a href='#'>Home</a></li><li><a href='#'>Courses</a></li><li><a href='#'>Contact</a></li>
  </ul>
</nav>
<p style='padding:16px'>Make the preview narrow to see the mobile menu button.</p>
<script>
  var b = document.getElementById('b'), l = document.getElementById('l');
  b.addEventListener('click', function () {
    var open = l.classList.toggle('open');
    b.setAttribute('aria-expanded', String(open));
  });
</script>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font-family: system-ui, sans-serif; min-height: 240px; }
  .bar { padding: 12px 20px; background: #1e293b; }
  details { position: relative; display: inline-block; }
  summary { list-style: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; color: #fff; font-weight: 600; }
  summary::-webkit-details-marker { display: none; }
  summary:hover, details[open] summary { background: #334155; }
  summary:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  .list { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: #fff; border-radius: 12px; padding: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
  .list a { display: block; padding: 10px 12px; color: #0f172a; text-decoration: none; border-radius: 8px; }
  .list a:hover { background: #eef2ff; }
</style>
<div class='bar'>
  <details>
    <summary>Account</summary>
    <div class='list'>
      <a href='#'>Profile</a><a href='#'>Settings</a><a href='#'>Sign out</a>
    </div>
  </details>
</div>
<p style='padding:20px'>details and summary give you a dropdown with no JavaScript.</p>

Output

Press Run to execute.

Exercise: Add keyboard support to a dropdownHTML

Complete the dropdown. The button must toggle aria-expanded and the hidden attribute of the list, close on Escape and return focus to the button, and close when the user clicks outside. The focus style must be visible.

Try it Yourself HTML

<style>
  .menu { list-style: none; padding: 8px; margin: 4px 0 0; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; width: 180px; }
  .menu[hidden] { display: none; }
  /* TODO: :focus-visible styles for button and links */
</style>
<div id='wrap'>
  <button id='btn' aria-expanded='false' aria-controls='list'>Options</button>
  <ul class='menu' id='list' hidden><li><a href='#'>Edit</a></li><li><a href='#'>Duplicate</a></li><li><a href='#'>Delete</a></li></ul>
</div>
<script>
  // TODO: toggle, Escape key, outside click
</script>

Output

Press Run to execute.

Show expected output

Clicking the button opens the list and updates aria-expanded. Escape or an outside click closes it and Escape returns focus to the button.

This is a self-check — compare your result with the expected output above.

Was this page helpful?

CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation

What is a navbar?

Semantic HTML for navigation

Building the layout

Responsive navigation

Keyboard and focus checklist

Performance and motion

Quick summary

What is a navbar?

Semantic HTML for navigation

Building the layout

Responsive navigation

Dropdown approaches

Positioning the dropdown panel

Keyboard and focus checklist

Performance and motion

Quick summary