Skip to content
Related Articles

Related Articles

Foundation CSS Dropdown Menu

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 20 Feb, 2022
Improve Article
Save Article

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.  

The Dropdown menu is used for displaying an expandable dropdown menu by using the Foundation CSS plugin.

Foundation CSS Dropdown Menu Class:

  • dropdown: This class is used to change a basic menu into an expandable dropdown menu.
  • menu: This class is used to create basic menu items. This class is used inside <ul> element.

Syntax: 

<ul class="dropdown menu" data-dropdown-menu> 
  <li><a href="#">....</a></li>
  ....
</ul>

Example 1: Horizontal Dropdown Menu, the following code demonstrates a horizontal dropdown menu.

HTML




<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Dropdowns</title>
    
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
  
     <!-- Compressed JavaScript -->
     <script src=
    </script>
     <script src=
       crossorigin="anonymous">
     </script>
  </head>
  <body>
    <h1 style="color:green;">GeeksforGeeks </h1>
    <h3>Foundation CSS Horizontal Dropdown Menu</h3>
       <ul class="dropdown menu" data-dropdown-menu>
            <li>
              <a href="#">Tutorials</a>
              <ul class="menu">
                <li><a href="#">Practice DS & Algo.</a></li>
                <li><a href="#">Algorithms</a></li>
                <li><a href="#">Data Structures</a></li>
                <li><a href="#">Interview Corner</a></li>
                <li><a href="#">Languages</a></li>
                <li><a href="#">CS Subjects</a></li>
                <li><a href="#">GATE</a></li>
                <li><a href="#">Web Technologies</a></li>
              </ul>
            </li>
            <li><a href="#">Student</a>
              <ul class="menu">
                <li><a href="#">Campus Ambassador Program</a></li>
                <li><a href="#">School Ambassador Program</a></li>
                <li><a href="#">Project</a></li>
                <li><a href="#">Geek Of the Month</a></li>
                <li><a href="#">Placement Course</a></li>
                <li><a href="#">Competitive Programming</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Careers</a></li>
              </ul>
            </li>
            <li><a href="#">Jobs</a>
              <ul class="menu">
                <li><a href="#">Apply for Jobs</a></li>
                <li><a href="#">Post a Job</a></li>
              </ul>
            </li>
            <li><a href="#">Courses</a></li>
        </ul>
      <script>
          $(document).foundation();
      </script>
  </body>
</html>


  Output: 

Foundation CSS Dropdown Menu

Foundation CSS Dropdown Menu Horizontal Dropdown

Example 2: For vertical Dropdown, just add vertical class to the dropdown menu and add vertical nested menu class in the submenu of the dropdown menu.  

HTML




<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Dropdowns</title>
    
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
  
     <!-- Compressed JavaScript -->
     <script src=
    </script>
     <script src=
       crossorigin="anonymous">
     </script>
  </head>
  <body>
    <h1 style="color:green;">GeeksforGeeks </h1>
    <h3>Foundation CSS vertical Dropdown Menu</h3>
    <ul class="vertical dropdown menu" data-dropdown-menu 
       style="max-width:250px;">
        <li>
          <a href="#">Tutorials</a>
          <ul class="vertical menu nested">
            <li><a href="#">Practice DS & Algo.</a></li>
            <li><a href="#">Algorithms</a></li>
            <li><a href="#">Data Structures</a></li>
            <li><a href="#">Interview Corner</a></li>
            <li><a href="#">Languages</a></li>
            <li><a href="#">CS Subjects</a></li>
            <li><a href="#">GATE</a></li>
            <li><a href="#">Web Technologies</a></li>
          </ul>
        </li>
       <li><a href="#">Student</a>
          <ul class="vertical menu nested">
            <li><a href="#">Campus Ambassador Program</a></li>
            <li><a href="#">School Ambassador Program</a></li>
            <li><a href="#">Project</a></li>
            <li><a href="#">Geek Of the Month</a></li>
            <li><a href="#">Placement Course</a></li>
            <li><a href="#">Competitive Programming</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Careers</a></li>
          </ul>
       </li>
        <li><a href="#">Jobs</a>
          <ul class="vertical menu nested">
            <li><a href="#">Apply for Jobs</a></li>
            <li><a href="#">Post a Job</a></li>
          </ul>
        </li>
        <li><a href="#">Courses</a></li>
     </ul>
     <script>
          $(document).foundation();
      </script
  </body>
</html>


Output:

Foundation CSS Dropdown Menu

Foundation CSS Dropdown Menu Vertical Dropdown

References: https://get.foundation/sites/docs/dropdown-menu.html


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!