Foundation Dropdown Menu

The Foundation Dropdown Menu allows users to select a value from a predefined dropdown list:

Example

<!-- Trigger the Dropdown --><a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>
    <!-- Dropdown content --><ul id="id01" data-dropdown-content class="f-dropdown">  <li><a 
    href="#">Link 1</a></li>  <li><a href="#">Link 2</a></li>  
    <li><a href="#">Link 3</a></li></ul>
    <!-- Initialize Foundation JS --><script>
    $(document).ready(function() {    
    $(document).foundation();})
    </script>

Example Explanation

The .dropdown class adds a downward arrow symbol to the button.

Use the data-dropdown=" attribute on the button or link to open the dropdown menu.

The id value needs to match the content of the dropdown menu (id01).

Add the .f-dropdown class and data-dropdown-content attribute to <div>, <nav>, <ul> to create the dropdown menu content.

Finally, initialize Foundation JS.

Note: On small screens, all dropdown menus are 100% width.

Dropdown Menu Sizes

Use .tiny, .small, .medium, .large, or .mega to modify the width of the dropdown menu.

Note: On small screens, all dropdown menus are 100% width.

Example

<!-- Tiny Dropdown: 
    max-width is 200px -->
    <ul id="id01" data-dropdown-content class="f-dropdown 
    tiny">..<!-- Small Dropdown: max-width is 300px -->
    &lt;ul id="id02" data-dropdown-content class="f-dropdown 
    small">..<!-- Medium Dropdown: max-width is 500px -->
    <ul id="id03" data-dropdown-content class="f-dropdown 
    medium"><!-- Large Dropdown: max-width is 800px -->
    &lt;ul id="id04" data-dropdown-content class="f-dropdown 
    large">..&lt;!-- 
    Mega Dropdown: 100% width -->
    &lt;ul id="id04" data-dropdown-content class="f-dropdown 
    mega">..

Dropdown Menu Padding

You can use the .content class to add padding to the dropdown menu:

Example

<!-- Default Dropdown --><ul id="id01" data-dropdown-content class="f-dropdown">..
    <!-- Dropdown with padding -->&lt;ul id="id02" data-dropdown-content class="f-dropdown 
    content">..

Additional Examples

Adding multimedia elements in the dropdown menu:

Example

<a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>
    <div id="id01" data-dropdown-content class="f-dropdown medium content">  
    <h4>Paris Title</h4>  <p>Some text.. some text..</p>  <img 
    src="paris.jpg" alt="Paris" width="400" height="300">  <p>Paris, je 
    t'aime.</p></div>

Dropdown Menu Direction

By default, the dropdown menu is at the bottom. You can modify its direction by adding data-options="align:left|right|top":

Example

<a href="#" data-dropdown="id01" data-options="align:right" class="button 
    dropdown">Right</a><a href="#" data-dropdown="id02" data-options="align:top" 
    class="button dropdown">Top</a><a href="#" data-dropdown="id03" 
    data-options="align:bottom" class="button dropdown">Bottom</a>&lt;a href="#" 
    data-dropdown="id04" data-options="align:left" class="button 
    dropdown">Left</a>

Dropdown Menu Trigger Condition

By default, the dropdown menu is displayed on button click. If you want it to show on mouse hover, use the data-options="is_hover:true" attribute on the button:

Example

<a href="#" data-dropdown="id01" data-options="is_hover:true" class="button dropdown">Hover 
    over me</a>
    <ul id="id01" data-dropdown-content class="f-dropdown">  <li><a 
    href="#">Link 1</a></li>  <li><a href="#">Link 2</a></li>  
    <li><a href="#">Link 3</a></li></ul>

Split Button

You can add the .split class to the button to create a split effect, which generates a downward-facing icon button on the <span> element:

Example

<button class="button split">Split Button   <span 
    data-dropdown="id01"></span></button>&lt;ul id="id01" data-dropdown-content 
    class="f-dropdown">  <li><a href="#">Link 1</a></li>  
    <li><a href="#">Link 2</a></li>  <li><a href="#">Link 3</a></li>
    </ul>
    <!-- Initialize Foundation JS --><script>
    $(document).ready(function() {    
    $(document).foundation();})
    </script>