Foundation - Button Dropdown Arrows

Description

You can use .dropdown class to add dropdown arrow to your button. It will not automatically add dropdown functionality to your button. To achieve this you have to attach the Dropdown plugin.

Example

The following example demonstrates how to add dropdown arrows to buttons in Foundation.

Live Demo

<html>
   <head>
      <title>Dropdown Arrows</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

   </head>

   <body>
      <button class = "tiny dropdown button">Tiny Dropdown</button>
      <button class = "small dropdown button">Small Dropdown</button>
      <button class = "dropdown button">Dropdown</button>
      <button class = "large dropdown button">Large Dropdown</button>
      <button class = "expanded dropdown button">Expanded Dropdown</button>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code button_dropdown_arrows.html file.
Open this HTML file in a browser, an output is displayed as shown below.

foundation_basic_controls.htm