Foundation CSS Responsive Navigation

Last Updated : 08 Apr, 2022

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 Responsive Navigation contains various components like the basic menu, dropdown menu, accordion menu, top bar, etc. which helps us to design & put together the responsive navigation quickly and easily in an effortless manner. It also allows switching between the different patterns depending upon various screen sizes. The 3 modular components in the Responsive Navigation are the Responsive Menu, Responsive Menu Toggle, and the Responsive toggle with animation.

Responsive Navigation Menu: This is the most basic component of Responsive Navigation. The Responsive Menu has some classes built in it, which allows us to re-orient the menu on different screen sizes.
Responsive Navigation Toggle: By using this feature we can add the toggle menu functionality in the screen size we want(mostly done on small screens). For making a toggle the most important attribute is the data-responsive-toggle and the data-hide-for attribute which we need to specify to determine on which screen size the toggle menu will be hidden.
Responsive Navigation toggle with animation: This is the same as the normal Responsive menu toggle. Here, when we toggle the menu in the small screen size, we can animate it. When we want to use animations from the Motion UI library we have to add the data-animate="someAnimationIn someAnimationOut" attribute.

Example 1: In this example, the menu becomes a drill-down menu in small screen size and a horizontal dropdown menu in medium to large size.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" 
         crossorigin="anonymous">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css" 
         crossorigin="anonymous">
    <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.js">
    </script>
    <title>
        Foundation CSS Responsive Navigation
    </title>
</head>

<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Foundation CSS Responsive Menu</h3>
    <ul class="vertical medium-horizontal menu" 
        data-responsive-menu="drilldown medium-dropdown">
        <li>
            <a href="#">DSA</a>
            <ul class="vertical menu">
                <li>
                    <a href="#">Data Structures</a>
                    <ul class="vertical menu">
                        <li>
                            <a href="#">Stack</a>
                        </li>
                        <li>
                            <a href="#">Queue</a>
                        </li>
                        <li>
                            <a href="#">Linked List</a>
                        </li>
                        <li>
                            <a href="#">Binary Tree</a>
                        </li>
                        <li>
                            <a href="#">Graph</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Algorithms</a>
                </li>
            </ul>
        </li>
        <li> 
            <a href="#">Web Technology</a>
            <ul class="vertical menu">
                <li>
                    <a href="#">HTML</a>
                </li>
                <li>
                    <a href="#">CSS</a>
                </li>
                <li>
                    <a href="#">JavaScript</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Competitive Programming</a>
            <ul class="vertical menu">
                <li>
                    <a href="#">Courses</a>
                </li>
                <li>
                    <a href="#">Problems</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Output:

Example 2: This example describes the Responsive Menu with Toggle.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" 
         crossorigin="anonymous">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css" 
         crossorigin="anonymous">
    <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.js">
    </script>
    <title>
        Foundation CSS Responsive Navigation
    </title>
</head>

<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Foundation CSS Responsive Menu Toggle</h3>
    <div class="title-bar" 
         data-responsive-toggle="responsive-menu" 
         data-hide-for="medium">
        <button class="menu-icon" 
                type="button" 
                data-toggle="responsive-menu">
        </button>
        <div class="title-bar-title">Menu</div>
    </div>
    <div class="top-bar"
         id="responsive-menu">
        <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text">GFG</li>
                <li class="has-submenu">
                    <a href="#0">Data Structures</a>
                    <ul class="submenu menu vertical" data-submenu>
                        <li>
                            <a href="#0">Stack</a>
                        </li>
                        <li>
                            <a href="#0">Queue</a>
                        </li>
                        <li>
                            <a href="#0">Linked List</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#0">Web Technology</a>
                </li>
                <li>
                    <a href="#0">Competitive Programming</a>
                </li>
            </ul>
        </div>
        <div class="top-bar-right">
            <ul class="menu">
                <li>
                    <input type="search"
                           placeholder="Search">
                </li>
                <li>
                    <button type="button"
                            class="button">
                        Search
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Output:

Example 3: In this example, we have added animation to toggle the navbar that makes the Responsive Navigation.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" 
         crossorigin="anonymous">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css" 
         crossorigin="anonymous">
    <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.js">
    </script>
    <title>
        Foundation CSS Responsive Navigation
    </title>
</head>

<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Foundation CSS Responsive Menu Toggle</h3>
    <div class="title-bar" 
         data-responsive-toggle="example-animated-menu" 
         data-hide-for="medium">
        <button class="menu-icon" 
                type="button" 
                data-toggle>
        </button>
        <div class="title-bar-title">Menu</div>
    </div>
    <div class="top-bar"
         id="example-animated-menu" 
         data-animate="hinge-in-from-top fade-out">
        <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text">GFG</li>
                <li> 
                    <a href="#">Data Structures</a>
                    <ul class="menu vertical">
                        <li>
                            <a href="#">Stack</a>
                        </li>
                        <li>
                            <a href="#">Queue</a>
                        </li>
                        <li>
                            <a href="#">Linked List</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Web Technology</a>
                </li>
                <li>
                    <a href="#">Competitive Programming</a>
                </li>
            </ul>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>