Foundation CSS Top Bar

The top bar component in Foundation CSS provides a versatile and responsive navigation bar that adapts well to different screen sizes. It allows you to create horizontal navigation menus with dropdown menus, search fields, and other elements. Here's how to implement a top bar using Foundation CSS:

1. Basic Top Bar Structure

Start by defining the basic structure of the top bar using the top-bar class along with the appropriate child elements for navigation items, logo, search field, etc.

<div class="top-bar" id="top-bar-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Logo</li>
      <li><a href="#">Menu Item 1</a></li>
      <li><a href="#">Menu Item 2</a></li>
      <li class="has-submenu">
        <a href="#">Dropdown</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">Submenu Item 1</a></li>
          <li><a href="#">Submenu Item 2</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="top-bar-right">
    <input type="search" placeholder="Search">
  </div>
</div>

2. Customizing Top Bar Styles

Foundation CSS provides classes to customize the appearance and behavior of the top bar. You can modify colors, alignment, spacing, and other styles by applying appropriate classes to the top bar and its child elements.

<div class="top-bar" id="top-bar-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Logo</li>
      <li><a href="#">Menu Item 1</a></li>
      <li><a href="#">Menu Item 2</a></li>
      <li class="has-submenu">
        <a href="#">Dropdown</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">Submenu Item 1</a></li>
          <li><a href="#">Submenu Item 2</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="top-bar-right">
    <input type="search" placeholder="Search">
  </div>
</div>

3. JavaScript Initialization

Ensure that any JavaScript components used in the top bar, such as dropdown menus or responsive behaviors, are properly initialized using Foundation CSS JavaScript.

$(document).foundation();

Conclusion

The Foundation CSS top bar component provides a flexible and customizable solution for creating responsive navigation menus. By leveraging its classes and JavaScript components, you can easily design navigation bars that enhance user experience and improve accessibility in your web projects.

Archive