Open In App

Foundation CSS Top Bar Basics

Improve
Improve
Like Article
Like
Save
Share
Report

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.  

A Top bar can be used to create a navigation bar that may contain 2 sections ie., the left-side section which contains the logo with a few other components & the right-side section contains the sign-up/login details, etc. For the small-size devices, they may be stacked on top of each other. Also, it can include the dropdown menu, which may inherit the background color of the top bar, along with a text input field and action button. 

Foundation CSS Top Bar Classes:

  • top-bar: This class defines a top bar in Foundation CSS.
  • top-bar-left: This class should contain the elements on the left side of the navigation bar.
  • top-bar-right:  This class should contain the elements on the right side of the navigation bar.
  • menu-text: This class indicates that this list element does not have a link inside it.
  • dropdown: This class sets up a dropdown to the menu container.
  • vertical: This class creates a vertical menu.

Syntax:

<div class="top-bar">
    <div class="top-bar-left">
          <ul>
              <li>..</li>
              ....
          </ul>
      </div>
    <div class="top-bar-right">
        <ul>
            <li>..</li>
              ....
          </ul>
      </div>
</div>

Example 1: This is a basic example illustrating Top Bar using Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS TopBar Basics</title>
      
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href=
    <link rel="stylesheet"
          href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
      
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <div class="top-bar" style="width: 60%;">
            <div class="top-bar-left">
                <ul class="dropdown menu" 
                    data-dropdown-menu>
                    <li class="menu-text">Company Name</li>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About Us</a>
                    </li>
                    <li>
                        <a href="#">Login</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>
    </center>
        <script>
            $(document).foundation();
        </script>
</body>
</html>


Output:

Foundation CSS top bar.

Example 2: This is a more complex example illustrating Nested Top Bar using Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Top Bar Basics</title>
      
    <!-- Compressed CSS -->
    <link rel="stylesheet" 
          href=
    <link rel="stylesheet" 
          href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
      
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <div class="top-bar" 
             style="width: 60%;">
            <div class="top-bar-left">
                <ul class="dropdown menu" data-dropdown-menu>
                    <li class="menu-text">Company Name</li>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li
                        <a href="#">Products</a>
                            <ul class="menu vertical">
                                <li>
                                    <a href="#">Mobiles</a>
                                </li>
                                <li>
                                    <a href="#">Laptops</a>
                                </li>
                                <li>
                                    <a href="#">Tablets</a>
                                </li>
                            </ul>
                    </li>
                    <li>
                        <a href="#">About Us</a>
                    </li>
                    <li>
                        <a href="#">Login</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>
    </center>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>


Output:

Foundation CSS Top Bar Basics

Foundation CSS Top Bar Basics

Reference: https://get.foundation/sites/docs/top-bar.html#basics



Last Updated : 02 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads