❮ Foundation Magellan Foundation Pricing Tables ❯

Foundation Top Bar Navigation

The top bar navigation is placed at the top of the page:

Example

&lt;nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <!-- Remove this if you don't need the title or icon -->
      <h1><a href="#">WebSiteName</a></h1>
    </li>
    <!-- Collapse button on small screens: Remove the .menu-icon class to hide the icon. If you only want to display the image, remove the "Menu" text -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="left">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </section>
</nav>
<!-- Initialize Foundation JS -->
<script>
  $(document).ready(function() {
    $(document).foundation();
  });
</script>

Example Explanation

Use <nav class="top-bar" data-topbar> to create a standard toolbar. The .title-area class defines the website logo area (must be inside li.name). A "menu" button will appear when the screen is small. Foundation's menu automatically collapses and expands based on screen size:

On small screens, many options are hidden due to space constraints. The li.toggle-topbar menu-icon class creates a menu button that, when clicked, displays the hidden options. Tip: Resize the browser window to see the effect.

.top-bar-section defines the navigation links section. The .left class aligns the links to the left. The .active class is used to highlight the selected item with a blue background.

Tip: If you want the navigation links to be right-aligned, change .left to .right:

Example

<section class="top-bar-section">
  <ul class="right">...

You can set both left and right alignment:

Example

<section class="top-bar-section">
  <ul class="left">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
  </ul>
  <ul class="right">
    <li><a href="#">Sign Up</a></li>
    <li><a href="#">Login</a></li>
  </ul>
</section>

Add dividers using the .divider class (vertical lines on large screens, horizontal lines on small screens):

Example

<ul class="left">
  <li class="active"><a href="#">Home</a></li>
  <li class="divider"></li>
  <li><a href="#">Page 1</a></li>
  <li class="divider"></li>
  <li><a href="#">Page 2</a></li>
  <li class="divider"></li>
  <li><a href="#">Page 3</a></li>
  <li class="divider"></li>
</ul>

Dropdown Menus in Navigation Bar

The top bar navigation can have dropdown menus.

Add the .has-dropdown class to the <li> element to create a dropdown menu:

Example

<section class="top-bar-section">
  <ul class="left">
    <li class="active"><a href="#">Home</a></li>
    <li class="has-dropdown">
      <a href="#">Dropdown</a>
      <ul class="dropdown">
        <li><a href="#">First link in dropdown</a></li>
        <li><a href="#">Second link in dropdown</a></li>
        <li class="active"><a href="#">Active link in dropdown</a></li>
      </ul>
    </li>
  </ul>
</section>

Dividers

Use the .divider class to add dividers to the dropdown menu:

Example

<ul class="dropdown">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Orange</a></li>
  <li class="divider"></li>
  <li><a href="#">Kale</a></li>
  <li><a href="#">Spinach</a></li>
</ul>

Dropdown Menu Labels

Add <label> elements inside <li> to create labels (titles) for the dropdown menu:

Example

<ul class="dropdown">
  <li><label>Fruit</label></li>
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Orange</a></li>
  <li class="divider"></li>
  <li><label>Vegetable</label></li>
  <li><a href="#">Kale</a></li>
  <li><a href="#">Spinach</a></li>
</ul>

Nested Dropdown Menus

Dropdown menus can contain nested dropdown menus:

Example

<section class="top-bar-section">
  <ul class="left">
    <li class="has-dropdown">
      <a href="#">Dropdown</a>
      <ul class="dropdown">
        <li><label>Level 1</label></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="has-dropdown">
          <a href="#">New dropdown</a>
          <ul class="dropdown">
            <li><label>Level 2</label></li>
            <li><a href="#">2nd level dropdown</a></li>
            <li><a href="#">2nd level dropdown</a></li>
            <li class="has-dropdown">
              <a href="#">New dropdown</a>
              <ul class="dropdown">
                <li><label>Level 3</label></li>
                <li><a href="#">3rd level dropdown</a></li>
                <li><a href="#">3rd level dropdown</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</section>

Clickable

By default, the dropdown menu in the navigation bar appears when the mouse hovers over it. Use the data-options="is_hover: false" attribute to make the navigation bar display the dropdown menu on click:

Example

<nav class="top-bar" data-topbar data-options="is_hover: false">

Buttons and Icons in Navigation Bar

You can place icons and buttons in the navigation bar:

Example

<li><a href="#" class="button">Button Link</a></li>

You can add icons to the navigation bar. For more icon styles, see the Foundation Icons Tutorial:

Example

<head>
  <!-- Foundation Icons Style -->
  <link rel="stylesheet" href="http://static.tutorialpro.org/assets/foundation-icons/foundation-icons.css">
</head>
<ul class="left">
  <li class="active"><a href="#"><i class="fi-home"></i> Home</a></li>
  <li><a href="#"><i class="fi-torso"></i> Sign Up</a></li>
  <li><a href="#"><i class="fi-magnifying-glass"></i> Search</a></li>
</ul>

Fixed Navigation Bar

The navigation bar can be fixed at the top of the page.

When scrolling, the navigation bar stays at the top.

To fix the navigation bar, simply place it inside a <div class="fixed">:

Example

<div class="fixed">
  &lt;nav class="top-bar" data-topbar>
    ...
  </nav>
</div>

Sticky Navigation Bar

You can place the navigation bar inside a <div class="sticky"> to set it to absolute positioning. When the scrollbar reaches this area, the navigation bar behaves like a fixed navigation bar:

Example

<div class="sticky">
  &lt;nav class="top-bar" data-topbar>
    ...
  </nav>
</div>

When you use the .sticky class, the top navigation bar will be fixed on all screen sizes. If you need to set it for specific screens, simply add the data-options="sticky_on: small|medium|large" attribute to the <nav>:

Example

<div class="sticky">  <!-- Only on large screens -->  
    <nav class="top-bar" data-topbar data-options="sticky_on: large">    
    ..   </nav></div>

Or set multiple screen sizes using an array:

Example

<div class="sticky">  <!-- Small and large screens (no medium screens)-->  
    &lt;nav class="top-bar" data-topbar data-options="sticky_on: 
    [small, large]">    
    ..   </nav></div>

❮ Foundation Magellan Foundation Pricing Tables ❯