Foundation CSS Kitchen Sink Top Bar

Last Updated : 01 Mar, 2022

Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.

Kitchen Sink has the elements to work in websites and applications. Kitchen Sink Top Bar is used to create the navigation bar at the top of our webpage.

Used classes:

top-bar: It is used to create the top bar at the top of the screen.
top-bar-left: It is used to create the elements on the left side of the top bar.
top-bar-right: It is used to create the elements on the right side of the top bar.

Syntax:

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

Example 1: Below is the example that illustrates the use of Kitchen Sink Top Bar using top-bar and top-bar-left class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link crossorigin="anonymous" rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
  
    <script crossorigin="anonymous" src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
</head> 
  
<body> 
  <h1 style="color: green;"> 
      GeeksforGeeks 
  </h1> 
    
  <h3>Foundation CSS Kitchen Sink Top Bar</h3> 
  
  <div class="top-bar"> 
      <div class="top-bar-left"> 
          <ul class="dropdown menu"> 
              <li class="menu-text">GeeksforGeeks</li> 
              <li><a href="#">Menu1</a></li> 
              <li><a href="#">Menu2</a></li> 
              <li><a href="#">Menu3</a></li> 
              <li><a href="#">Menu4</a></li> 
          </ul> 
      </div> 
  </div> 
</body> 
  
</html>

Output:

Top bar left

Example 2: Below is the example that illustrates the use of Kitchen Sink Top Bar using top-bar, top-bar-left and top-bar-right class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link crossorigin="anonymous" rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
  
    <script crossorigin="anonymous" src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>Foundation CSS Kitchen Sink Top Bar</h3> 
  
     <div class="top-bar"> 
        <div class="top-bar-left"> 
          <ul class="dropdown menu" data-dropdown-menu> 
            <li class="menu-text">GeeksforGeeks</li> 
            <li><a href="#">Menu1</a></li> 
            <li><a href="#">Menu2</a></li> 
  
            <li class="has-submenu"> 
              <a href="#">Dropdown</a> 
              <ul class="submenu menu vertical" data-submenu> 
                <li><a href="#">Item1</a></li> 
                <li><a href="#">Item2</a></li> 
                <li><a href="#">Item3</a></li> 
                <li><a href="#">Item4</a></li> 
                <li><a href="#">Item5</a></li> 
              </ul> 
            </li> 
  
            <li><a href="#">Menu5</a></li> 
            <li><a href="#">Menu6</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).ready(function () { 
          $(document).foundation(); 
      }) 
    </script> 
</body> 
  
</html>