Foundation Dropdowns

Foundation Dropdowns are interactive components that display hidden content. This chapter covers various uses of dropdown menus.

Dropdowns consist of a trigger and a dropdown pane:

html

<!-- Trigger button -->
<button class="button" type="button" data-toggle="example-dropdown">
    Open Dropdown
</button>

<!-- Dropdown pane -->
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
    <p>This is the dropdown menu content.</p>
</div>

Use data-position and data-alignment to control position:

html

<!-- Bottom center (default) -->
<div class="dropdown-pane" id="dropdown-1" data-dropdown data-position="bottom" data-alignment="center">
    Content
</div>

<!-- Bottom left aligned -->
<div class="dropdown-pane" id="dropdown-2" data-dropdown data-position="bottom" data-alignment="left">
    Content
</div>

<!-- Bottom right aligned -->
<div class="dropdown-pane" id="dropdown-3" data-dropdown data-position="bottom" data-alignment="right">
    Content
</div>

<!-- Top -->
<div class="dropdown-pane" id="dropdown-4" data-dropdown data-position="top" data-alignment="center">
    Content
</div>

<!-- Left -->
<div class="dropdown-pane" id="dropdown-5" data-dropdown data-position="left" data-alignment="center">
    Content
</div>

<!-- Right -->
<div class="dropdown-pane" id="dropdown-6" data-dropdown data-position="right" data-alignment="center">
    Content
</div>

Hover Trigger

Use data-hover="true" to enable hover triggering:

html

<button class="button" type="button" data-toggle="hover-dropdown">
    Hover to Open
</button>

<div class="dropdown-pane" id="hover-dropdown" data-dropdown data-hover="true" data-hover-pane="true">
    <p>Shows on mouse hover.</p>
</div>

Combine with menu component to create navigation dropdowns:

html

<ul class="dropdown menu" data-dropdown-menu>
    <li>
        <a href="#">Menu Item</a>
        <ul class="menu vertical">
            <li><a href="#">Submenu Item 1</a></li>
            <li><a href="#">Submenu Item 2</a></li>
            <li><a href="#">Submenu Item 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Products</a>
        <ul class="menu vertical">
            <li><a href="#">Product A</a></li>
            <li><a href="#">Product B</a></li>
            <li>
                <a href="#">More Products</a>
                <ul class="menu vertical">
                    <li><a href="#">Product C</a></li>
                    <li><a href="#">Product D</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Button with dropdown arrow:

html

<button class="button dropdown" type="button" data-toggle="action-dropdown">
    Actions
</button>

<div class="dropdown-pane" id="action-dropdown" data-dropdown>
    <ul class="menu vertical">
        <li><a href="#">Edit</a></li>
        <li><a href="#">Copy</a></li>
        <li><a href="#">Delete</a></li>
    </ul>
</div>

Split Button

html

<div class="button-group">
    <a class="button">Save</a>
    <button class="dropdown button arrow-only" data-toggle="split-dropdown">
        <span class="show-for-sr">Show More Options</span>
    </button>
</div>

<div class="dropdown-pane" id="split-dropdown" data-dropdown>
    <ul class="menu vertical">
        <li><a href="#">Save As</a></li>
        <li><a href="#">Save and Exit</a></li>
        <li><a href="#">Save Copy</a></li>
    </ul>
</div>

Dropdowns can contain any HTML content:

html

<button class="button" type="button" data-toggle="form-dropdown">
    Quick Login
</button>

<div class="dropdown-pane" id="form-dropdown" data-dropdown style="width: 300px;">
    <h5>User Login</h5>
    <form>
        <label>
            Username
            <input type="text" placeholder="Enter username">
        </label>
        <label>
            Password
            <input type="password" placeholder="Enter password">
        </label>
        <div class="grid-x grid-margin-x">
            <div class="cell auto">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
            <div class="cell shrink">
                <a href="#">Forgot password?</a>
            </div>
        </div>
        <button class="button expanded" type="submit">Login</button>
    </form>
</div>

Custom Width

html

<style>
    .dropdown-pane.wide {
        width: 400px;
    }
</style>

<div class="dropdown-pane wide" id="wide-dropdown" data-dropdown>
    <p>This is a 400px wide dropdown menu.</p>
</div>

html

<style>
    .dropdown-pane .menu.bordered li {
        border-bottom: 1px solid #eee;
    }
    .dropdown-pane .menu.bordered li:last-child {
        border-bottom: none;
    }
</style>

<div class="dropdown-pane" id="bordered-dropdown" data-dropdown>
    <ul class="menu vertical bordered">
        <li><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a></li>
        <li><a href="#">Menu Item 3</a></li>
    </ul>
</div>

html

<div class="dropdown-pane" id="icon-dropdown" data-dropdown>
    <ul class="menu vertical">
        <li><a href="#"><i class="fi-pencil"></i> Edit</a></li>
        <li><a href="#"><i class="fi-page-copy"></i> Copy</a></li>
        <li><a href="#"><i class="fi-download"></i> Download</a></li>
        <li><a href="#"><i class="fi-trash"></i> Delete</a></li>
    </ul>
</div>

Configuration Options

html

<div class="dropdown-pane" id="config-dropdown" data-dropdown
     data-hover="false"
     data-close-on-click="true"
     data-auto-focus="true"
     data-force-follow="true"
     data-v-offset="10"
     data-h-offset="0">
    Content
</div>

Option	Description	Default
`data-hover`	Hover trigger	false
`data-close-on-click`	Close on click	true
`data-auto-focus`	Auto focus	true
`data-v-offset`	Vertical offset	0
`data-h-offset`	Horizontal offset	0

JavaScript API

Open/Close

javascript

// Get instance
var dropdown = new Foundation.Dropdown($('#my-dropdown'));

// Open
dropdown.open();

// Close
dropdown.close();

// Toggle
dropdown.toggle();

Events

javascript

$('#my-dropdown').on('show.zf.dropdown', function() {
    console.log('Dropdown opened');
});

$('#my-dropdown').on('hide.zf.dropdown', function() {
    console.log('Dropdown closed');
});

Complete Example

html

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Dropdowns Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
            padding: 20px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
        }
        .dropdown-pane .menu a {
            padding: 10px 15px;
        }
        .dropdown-pane .menu a i {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation Dropdowns Showcase</h1>

        <div class="demo-section">
            <h3>Basic Dropdown</h3>
            <button class="button" type="button" data-toggle="basic-dropdown">
                Click to Open
            </button>
            <div class="dropdown-pane" id="basic-dropdown" data-dropdown data-auto-focus="true">
                <p>This is basic dropdown content.</p>
                <p>Can contain any HTML element.</p>
            </div>
        </div>

        <div class="demo-section">
            <h3>Hover Dropdown</h3>
            <button class="button secondary" type="button" data-toggle="hover-dropdown-demo">
                Hover to Open
            </button>
            <div class="dropdown-pane" id="hover-dropdown-demo" data-dropdown data-hover="true" data-hover-pane="true">
                <p>Automatically shows on mouse hover.</p>
            </div>
        </div>

        <div class="demo-section">
            <h3>Dropdown Positions</h3>
            <button class="button" type="button" data-toggle="pos-bottom">Bottom</button>
            <div class="dropdown-pane" id="pos-bottom" data-dropdown data-position="bottom" data-alignment="center">
                Bottom Center
            </div>

            <button class="button" type="button" data-toggle="pos-top">Top</button>
            <div class="dropdown-pane" id="pos-top" data-dropdown data-position="top" data-alignment="center">
                Top Center
            </div>

            <button class="button" type="button" data-toggle="pos-left">Left</button>
            <div class="dropdown-pane" id="pos-left" data-dropdown data-position="left" data-alignment="center">
                Left Center
            </div>

            <button class="button" type="button" data-toggle="pos-right">Right</button>
            <div class="dropdown-pane" id="pos-right" data-dropdown data-position="right" data-alignment="center">
                Right Center
            </div>
        </div>

        <div class="demo-section">
            <h3>Menu with Icons</h3>
            <button class="button dropdown" type="button" data-toggle="icon-menu">
                Action Menu
            </button>
            <div class="dropdown-pane" id="icon-menu" data-dropdown>
                <ul class="menu vertical">
                    <li><a href="#"><i class="fi-pencil"></i> Edit</a></li>
                    <li><a href="#"><i class="fi-page-copy"></i> Copy</a></li>
                    <li><a href="#"><i class="fi-download"></i> Download</a></li>
                    <li><a href="#"><i class="fi-share"></i> Share</a></li>
                    <li><a href="#" style="color: #cc4b37;"><i class="fi-trash"></i> Delete</a></li>
                </ul>
            </div>
        </div>

        <div class="demo-section">
            <h3>Split Button</h3>
            <div class="button-group">
                <a class="button">Save Document</a>
                <button class="dropdown button arrow-only" data-toggle="split-demo">
                    <span class="show-for-sr">More Options</span>
                </button>
            </div>
            <div class="dropdown-pane" id="split-demo" data-dropdown>
                <ul class="menu vertical">
                    <li><a href="#">Save As...</a></li>
                    <li><a href="#">Save and Close</a></li>
                    <li><a href="#">Save Copy</a></li>
                    <li><a href="#">Export to PDF</a></li>
                </ul>
            </div>
        </div>

        <div class="demo-section">
            <h3>Navigation Dropdown</h3>
            <ul class="dropdown menu" data-dropdown-menu>
                <li>
                    <a href="#">Products</a>
                    <ul class="menu vertical">
                        <li><a href="#">Software Products</a></li>
                        <li><a href="#">Hardware Products</a></li>
                        <li>
                            <a href="#">Solutions</a>
                            <ul class="menu vertical">
                                <li><a href="#">Enterprise Solutions</a></li>
                                <li><a href="#">Personal Solutions</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Services</a>
                    <ul class="menu vertical">
                        <li><a href="#">Technical Support</a></li>
                        <li><a href="#">Consulting Services</a></li>
                        <li><a href="#">Training Services</a></li>
                    </ul>
                </li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Form Dropdown</h3>
            <button class="button" type="button" data-toggle="form-demo">
                Quick Login
            </button>
            <div class="dropdown-pane" id="form-demo" data-dropdown data-close-on-click="false" style="width: 300px;">
                <h5>User Login</h5>
                <form>
                    <label>
                        Username
                        <input type="text" placeholder="Enter username">
                    </label>
                    <label>
                        Password
                        <input type="password" placeholder="Enter password">
                    </label>
                    <div class="grid-x">
                        <div class="cell auto">
                            <label><input type="checkbox"> Remember me</label>
                        </div>
                        <div class="cell shrink">
                            <a href="#">Forgot password?</a>
                        </div>
                    </div>
                    <button class="button expanded" type="submit">Login</button>
                </form>
            </div>
        </div>

        <div class="demo-section">
            <h3>Notification Dropdown</h3>
            <button class="button" type="button" data-toggle="notification-dropdown">
                Notifications <span class="badge">3</span>
            </button>
            <div class="dropdown-pane" id="notification-dropdown" data-dropdown style="width: 300px; padding: 0;">
                <div style="padding: 15px; border-bottom: 1px solid #eee;">
                    <strong>Notifications</strong>
                    <a href="#" class="float-right" style="font-size: 12px;">Mark All Read</a>
                </div>
                <ul class="menu vertical" style="margin: 0;">
                    <li style="border-bottom: 1px solid #eee;">
                        <a href="#" style="padding: 15px;">
                            <strong>System Notification</strong><br>
                            <small>Your order has been shipped</small>
                        </a>
                    </li>
                    <li style="border-bottom: 1px solid #eee;">
                        <a href="#" style="padding: 15px;">
                            <strong>Message Alert</strong><br>
                            <small>John sent you a message</small>
                        </a>
                    </li>
                    <li>
                        <a href="#" style="padding: 15px;">
                            <strong>System Update</strong><br>
                            <small>New version released</small>
                        </a>
                    </li>
                </ul>
                <div style="padding: 10px; text-align: center; border-top: 1px solid #eee;">
                    <a href="#">View All Notifications</a>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Appropriate use: Only use dropdowns when you need to show secondary actions or options
Item count: Recommend no more than 10 options
Grouping: Use dividers or headings to group menu items
Accessibility: Ensure keyboard can operate the dropdown
Mobile: Consider touch experience for mobile users

html

<!-- Dropdown with grouping -->
<ul class="menu vertical">
    <li class="menu-text">Edit</li>
    <li><a href="#">Cut</a></li>
    <li><a href="#">Copy</a></li>
    <li><a href="#">Paste</a></li>
    <li class="menu-text">View</li>
    <li><a href="#">Zoom In</a></li>
    <li><a href="#">Zoom Out</a></li>
</ul>

Summary

In this chapter we learned:

Creating basic dropdowns
Dropdown position and alignment
Hover trigger and navigation dropdowns
Split buttons
Custom content dropdowns (forms, notifications, etc.)
Using JavaScript API

Next chapter, we will learn Foundation Accordion.

Tip: Dropdowns are common interactive components, be sure to test their usability on mobile devices.

Foundation Dropdowns ​

Basic Dropdown ​

Dropdown Position ​

Hover Trigger ​

Navigation Dropdown ​

Dropdown Button ​

Split Button ​

Custom Content Dropdown ​

Dropdown Styling ​

Custom Width ​

Bordered Menu ​

Menu with Icons ​

Configuration Options ​

JavaScript API ​

Open/Close ​

Events ​

Complete Example ​

Dropdown Best Practices ​

Summary ​

Foundation Dropdowns

Basic Dropdown

Dropdown Position

Hover Trigger

Navigation Dropdown

Dropdown Button

Split Button

Custom Content Dropdown

Dropdown Styling

Custom Width

Bordered Menu

Menu with Icons

Configuration Options

JavaScript API

Open/Close

Events

Complete Example

Dropdown Best Practices

Summary