Foundation CSS Dropdown Menu Sass Reference

Last Updated : 23 Jul, 2025

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.

Variable Used:

Variable-NameDescriptionTypeDefault-Value
$dropdownmenu-arrows This variable is used to define the enable arrows for items with dropdown menus. Booleantrue 
 
$dropdownmenu-arrow-color This variable is used to define the set dropdown menu arrow color if an arrow is used.Color $anchor-color 
 
$dropdownmenu-arrow-size This variable is used to define the set dropdown menu arrow size if an arrow is used.Length 6px 
 
$dropdownmenu-arrow-padding This variable is used to define the sets dropdown menu arrow padding for aligning the arrow correctly.Length1.5rem 
 
$dropdownmenu-min-width This variable is used to define the minimum width of the dropdown sub-menus.Length200px 
 
$dropdownmenu-background This variable is used to define the background color for top-level items.Color null 
 
$dropdownmenu-submenu-background This variable is used to define the background color for dropdowns.Color $white 
 
$dropdownmenu-padding This variable is used to define the padding for top level items.Number $global-menu-padding 
 
$dropdownmenu-nested-margin This variable is used to define the sets dropdown menu nested marginNumber 0 
$dropdownmenu-submenu-padding This variable is used to define the padding for sub-menu items.List $dropdownmenu-padding 
 
$dropdownmenu-border This variable is used to define the border for the dropdown sub-menus.Color 1px solid $medium-gray 
 
$dropdown-menu-item-color-active This variable is used to define the text color of an active dropdown menu item.Color get-color(primary) 
 
$dropdown-menu-item-background-active This variable is used to define the background color of an active dropdown menu item. Colortransparent 

Example 1: In the below code, we will make use of the above variable to demonstrate the use 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=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous">

    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"
    crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks </h1>
        <h3>A computer science portal for geeks</h3>
    </center>
    <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>

SASS Code:

$dropdownmenu-arrow-padding    : 1.5rem;
.dropdown {
   padding:$dropdownmenu-arrow-padding;
}

Compiled CSS Code:

.dropdown {
  padding: 1.5rem; 
}

Output:

 

Example 2: In the below code, we will make use of the above variable to demonstrate the use 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=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
         crossorigin="anonymous">

    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"
    crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks </h1>
        <h3>A computer science portal for geeks</h3>
    </center>
    <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>

SASS Code:

$dropdownmenu-min-width : 200px;
.dropdown {
   min-width: $dropdownmenu-min-width;
}

Compiled CSS Code:

.dropdown top-level{
  min-width: 200px; 
}

Output:

 

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

Comment

Explore