Dropdown Navbar

<nav class="dropdown-navbar" aria-label="Primary Navigation">

  <a href="#" class="dropdown-brand">
    <span>&lt;/&gt;</span>
    CodeRipple
  </a>

  <div class="dropdown-nav-links">

    <a href="#">Home</a>

    <div class="dropdown-item">

      <button class="dropdown-toggle"
              type="button"
              aria-expanded="false">
        Components
        <span class="dropdown-arrow">⌄</span>
      </button>

      <div class="dropdown-menu">
        <a href="#">Buttons</a>
        <a href="#">Cards</a>
        <a href="#">Text Effects</a>
        <a href="#">Loaders</a>
      </div>

    </div>

    <a href="#">Playground</a>
    <a href="#">Blog</a>
    <a href="#">About</a>

  </div>

</nav>

.dropdown-navbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  width:100%;
  padding:14px 18px;

  background:#0b1423;
  border:1px solid #1c2a40;
  border-radius:14px;
}

.dropdown-brand{
  display:flex;
  align-items:center;
  gap:8px;
  color:#ffffff;
  font-weight:800;
  text-decoration:none;
}

.dropdown-brand span{
  color:#22d3ee;
}

.dropdown-nav-links{
  display:flex;
  align-items:center;
  gap:18px;
}

.dropdown-nav-links > a,
.dropdown-toggle{
  color:#aab4c8;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}

.dropdown-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.dropdown-nav-links > a:hover,
.dropdown-toggle:hover{
  color:#22d3ee;
}

.dropdown-item{
  position:relative;
}

.dropdown-menu{
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  z-index:20;

  display:none;
  min-width:180px;
  padding:8px;

  background:#0b1423;
  border:1px solid #1c2a40;
  border-radius:12px;
  box-shadow:0 15px 35px rgba(0,0,0,.35);
}

.dropdown-menu.open{
  display:block;
}

.dropdown-menu a{
  display:block;
  padding:10px 12px;
  border-radius:8px;

  color:#aab4c8;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}

.dropdown-menu a:hover{
  color:#ffffff;
  background:rgba(34,211,238,.08);
}

.dropdown-arrow{
  transition:transform .25s ease;
}

.dropdown-toggle.active .dropdown-arrow{
  transform:rotate(180deg);
}

const dropdownToggle = document.querySelector('.dropdown-toggle');
const dropdownMenu = document.querySelector('.dropdown-menu');

dropdownToggle.addEventListener('click', function() {

  dropdownMenu.classList.toggle('open');
  dropdownToggle.classList.toggle('active');

  const isOpen = dropdownMenu.classList.contains('open');

  dropdownToggle.setAttribute('aria-expanded', isOpen);

});

How This Dropdown Navbar Works

The Dropdown Navbar is a horizontal navigation component with a CodeRipple brand, standard navigation links, and a Components button that opens a submenu. The main links are Home, Playground, Blog, and About, while the dropdown contains Buttons, Cards, Text Effects, and Loaders.

The outer .dropdown-navbar uses Flexbox to keep the brand and navigation links on opposite sides. align-items: center vertically aligns them, while justify-content: space-between separates the two groups. The navbar fills its available width and uses 14px vertical and 18px horizontal padding.

Its visual design uses a dark #0b1423 background, a #1c2a40 border, and 14px rounded corners. The brand is another flex container containing the </> symbol and CodeRipple text. The symbol uses the cyan #22d3ee accent while the brand name remains white.

The navigation links are arranged horizontally with an 18px gap. Both the regular links and .dropdown-toggle use muted #aab4c8 text at 14px with a font weight of 600. Hovering over either type changes the text to cyan, giving the navbar a consistent interactive state.

The Components control is a button rather than a normal anchor. It starts with aria-expanded="false", which represents the closed state of the associated dropdown. The button also contains a .dropdown-arrow element that visually indicates whether the menu is open.

The dropdown itself is positioned relative to .dropdown-item. Because the parent has position: relative, .dropdown-menu can use absolute positioning without being positioned against the entire page. It appears at top: calc(100% + 12px) and left: 0, placing the submenu 12px below its trigger.

By default, .dropdown-menu uses display: none. JavaScript adds the open class when the Components button is clicked, and .dropdown-menu.open switches it to display: block. The menu has a minimum width of 180px, 8px inner padding, a 12px border radius, and a 0 15px 35px rgba(0,0,0,.35) shadow.

Each submenu link is displayed as a block with 10px 12px padding. Hovering changes the text to white and applies a subtle rgba(34,211,238,.08) cyan background. This creates a clear hover state without changing the dimensions of the dropdown.

The arrow provides additional state feedback. Its transform has a .25s transition. When the toggle receives the active class, .dropdown-toggle.active .dropdown-arrow applies rotate(180deg), turning the arrow as the submenu opens. For more information about this technique, see the MDN CSS transform documentation.

JavaScript handles all dropdown state changes. Clicking .dropdown-toggle toggles open on the menu and active on the button. The script then checks dropdownMenu.classList.contains('open') and stores the result in isOpen. Finally, setAttribute() updates aria-expanded with the current boolean state.

The supplied component does not contain a responsive media query, mobile hamburger behavior, outside-click closing, or automatic dropdown closing when a submenu item is selected. Its current behavior is specifically a click-controlled desktop-style dropdown.

Customizing the Dropdown Navbar

The component’s existing HTML and CSS provide several practical values that can be changed to fit another website or interface.

• Replace CodeRipple and the </> symbol with your own brand name and mark.
• Change Home, Components, Playground, Blog, and About to match your primary navigation structure.
• Replace Buttons, Cards, Text Effects, and Loaders with the submenu destinations your site requires.
• Adjust the 18px navigation gap or 24px navbar gap to change horizontal spacing.
• Change the 180px minimum dropdown width to accommodate shorter or longer submenu labels.
• Modify #0b1423, #1c2a40, and #22d3ee to create a different background, border, and accent palette.
• Adjust the 12px dropdown offset in top: calc(100% + 12px) to move the submenu closer to or farther from its trigger.
• Change the .25s arrow transition to control how quickly the indicator rotates.

Where to Use This Dropdown Navbar

This component works best for navigation structures where one primary section needs a small group of secondary destinations.

• Component libraries with category submenus
• Documentation websites
• Developer tools and resource sites
• Portfolio websites with grouped project links
• Blogs with category navigation
• Desktop-oriented application headers

The submenu keeps secondary links hidden until they are needed, helping the primary navbar remain compact. If your interface needs to save more horizontal space, the Hamburger Menu Navbar is a related CodeRipple navigation option to consider.

Frequently Asked Questions

Does the Dropdown Navbar use JavaScript?

Yes. JavaScript toggles the dropdown menu’s open class, changes the button’s active class, and updates the aria-expanded attribute whenever Components is clicked.

How does the dropdown menu become visible?

The menu starts with display: none. When JavaScript adds the open class, the .dropdown-menu.open rule changes it to display: block.

Does the dropdown close when the user clicks outside the navbar?

No. The current JavaScript only listens for clicks on .dropdown-toggle. There is no document-level click listener for automatically closing the menu when the user clicks elsewhere.

Is this Dropdown Navbar responsive?

The navbar uses flexible layout properties and width: 100%, but the supplied CSS does not include a media query or a dedicated mobile navigation state. No hamburger conversion is implemented in this component.

The Dropdown Navbar combines a Flexbox header, an absolutely positioned submenu, a rotating arrow, and a small JavaScript state handler to provide straightforward click-controlled dropdown navigation.