×

HubSpot Dropdown Menu Animation Guide

/ CRM, Hubspot / By

HubSpot Dropdown Menu Animation Guide

Building a smooth dropdown animation is a practical way to improve navigation on any website, including those powered by HubSpot. In this guide, you will learn how to create a clean, accessible dropdown menu using HTML, CSS, and a touch of JavaScript, based on the steps outlined in HubSpot’s dropdown animation tutorial.

This walkthrough focuses on structure first, then styling, and finally animation. You can adapt the same approach when creating custom modules or templates in your HubSpot environment.

Why Use a Dropdown Menu in HubSpot Navigation?

Dropdown menus help you group related pages under one parent link. When implemented correctly, they:

  • Keep your navigation bar clean and organized
  • Make it easier for visitors to find content
  • Allow you to highlight key site sections
  • Improve usability on both desktop and mobile

When you bring this pattern into HubSpot templates, you enhance user experience without sacrificing performance or accessibility.

Step 1: Set Up the Basic HTML Structure

Start by creating the HTML skeleton of your dropdown menu. This mirrors the structure used in the original tutorial on the HubSpot blog.

<nav class="navbar">
  <ul class="menu">
    <li class="menu-item">
      <a href="#" class="menu-link">Services</a>
      <ul class="dropdown">
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Development</a></li>
        <li><a href="#">Marketing</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="#">About</a></li>
    <li class="menu-item"><a href="#">Contact</a></li>
  </ul>
</nav>

Key points:

  • The nav element wraps your main navigation.
  • Each top-level link is a li.menu-item.
  • The dropdown submenu is another ul nested inside the parent list item.

This structure works well whether you are hand-coding or embedding into a HubSpot layout.

Step 2: Add Base CSS for Layout and Style

Next, style the menu so that it looks like a standard horizontal navigation bar. Use modern, clean CSS similar to what is demonstrated in the HubSpot tutorial.

.navbar {
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}

.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 20px;
}

.menu-item {
  position: relative;
  margin-right: 20px;
}

.menu-link {
  display: block;
  padding: 15px 10px;
  text-decoration: none;
  color: #333;
}

.menu-link:hover {
  color: #0073e6;
}

These rules:

  • Create a horizontal menu with flexbox
  • Give each menu item spacing and hit area
  • Set simple hover color changes for better feedback

Step 3: Hide the Dropdown by Default

The dropdown content should be invisible until the user hovers or taps the parent item. The HubSpot blog example uses positioning and opacity to achieve this effect.

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.dropdown li a {
  display: block;
  padding: 8px 15px;
  color: #333;
  text-decoration: none;
}

.dropdown li a:hover {
  background: #f5f5f5;
}

This setup prepares the menu for animation by controlling opacity, transform, and visibility.

Step 4: Trigger the Dropdown Animation

To show the dropdown on hover for desktop users, use a simple CSS hover selector. This technique is compatible with HubSpot templates that render standard HTML and CSS.

.menu-item:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

Now, when a visitor hovers over the parent menu item, the submenu:

  • Fades in smoothly
  • Slides up slightly into place
  • Becomes clickable and visible

Step 5: Add JavaScript for Click and Touch Support

Hover-based interactions alone are not ideal for touch devices. The HubSpot dropdown article solves this by adding a small JavaScript snippet to toggle a class on click.

const menuItems = document.querySelectorAll('.menu-item');

menuItems.forEach(item => {
  const dropdown = item.querySelector('.dropdown');

  if (dropdown) {
    item.addEventListener('click', function (e) {
      e.preventDefault();
      const isOpen = item.classList.contains('open');

      document.querySelectorAll('.menu-item.open').forEach(openItem => {
        openItem.classList.remove('open');
      });

      if (!isOpen) {
        item.classList.add('open');
      }
    });
  }
});

Then extend your CSS:

.menu-item.open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

This approach keeps behavior consistent across devices, including HubSpot-hosted pages viewed on mobile.

Step 6: Improve Accessibility and UX

The original HubSpot tutorial emphasizes usability. Enhance accessibility with simple attributes and keyboard support.

  • Add aria-haspopup="true" and aria-expanded="false" to parent links
  • Update aria-expanded to true when the menu opens
  • Allow closing the menu with the Escape key

Sample JavaScript update:

item.addEventListener('click', function (e) {
  e.preventDefault();
  const isOpen = item.classList.contains('open');

  document.querySelectorAll('.menu-item.open').forEach(openItem => {
    openItem.classList.remove('open');
    const link = openItem.querySelector('.menu-link');
    if (link) link.setAttribute('aria-expanded', 'false');
  });

  if (!isOpen) {
    item.classList.add('open');
    const link = item.querySelector('.menu-link');
    if (link) link.setAttribute('aria-expanded', 'true');
  }
});

How to Use This Dropdown in a HubSpot Template

You can integrate this dropdown animation into a HubSpot theme or custom module:

  1. Copy the HTML structure into a custom header or navigation module.
  2. Add the CSS to your theme stylesheet or a dedicated global stylesheet.
  3. Include the JavaScript in a site-wide footer file or a separate JS file attached to your template.

For complex implementations or multi-level navigation, you may want expert help. Agencies like Consultevo specialize in technical SEO, UX, and CMS integrations that can complement your HubSpot setup.

Reference: Original HubSpot Dropdown Tutorial

This article is based on the techniques explained in the official HubSpot dropdown animation tutorial. For the original code, visual examples, and any updates, visit the source here: HubSpot dropdown animation guide.

By following these steps, you can create a polished dropdown animation that is fast, accessible, and easy to maintain across your HubSpot pages and any other web platform you use.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Verified by MonsterInsights