Foundation Navigation

Live Preview: Top Bar

Foundation Code:

<div class="title-bar" data-responsive-toggle="main-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="main-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">My Site</li>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

Live Preview: Horizontal Menu

• Home
• Profile
• Messages
• Disabled

Foundation Code:

<ul class="menu">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
  <li class="disabled"><a href="#">Disabled</a></li>
</ul>

<!-- Vertical Menu -->
<ul class="menu vertical">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

Live Preview: Breadcrumbs

Foundation Code:

<nav aria-label="You are here:" role="navigation">
  <ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="disabled">Disabled</li>
    <li>
      <span class="show-for-sr">Current: </span> Data
    </li>
  </ul>
</nav>

Live Preview: Pagination

Foundation Code:

<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="pagination-previous disabled">Previous</li>
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li>
  </ul>
</nav>

Live Preview: Side Nav

Foundation Code:

<ul class="vertical menu">
  <li class="active"><a href="#">Dashboard</a></li>
  <li><a href="#">Settings</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

<!-- Nested vertical menu -->
<ul class="vertical menu">
  <li>
    <a href="#">Parent 1</a>
    <ul class="nested vertical menu">
      <li><a href="#">Child 1</a></li>
    </ul>
  </li>
</ul>

Live Preview: Dropdown Menu

Foundation Code:

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Sub-item 1</a></li>
      <li><a href="#">Sub-item 2</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
</ul>

<!-- Hover dropdown -->
<ul class="dropdown menu" data-dropdown-menu data-hover-delay="0">
  <li><a href="#">Hover Menu</a></li>
</ul>