一番上のバーは、ページの上部に配置されたナビゲーションヘッダです：
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<!--
Remove this if you don't want a title/logo -->
<h1><a href="#">WebSiteName</a></h1>
</li>
<!-- Collapsible Button on small screens:
remove .menu-icon to get rid of icon.
Remove the "Menu" text if you only want to show the icon -->
<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 for the collapsible button to work-->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
結果：
標準のトップバーは、<nav class="top-bar" data-topbar> で作成します。
.title-area クラスは、web サイトのロゴ用のエリア（li.name の中に配置しなければならない）と、
小型画面にだけ表示される "menu" ボタンを定義します；
Foundation では、画面サイズに応じてトップバーを展開したり、折畳んだりすることができます：
小型画面では、トップバーは場所を取りすぎるので、非表示にするか、必要な場合のみ表示するようにすべきです。
li.toggle-topbar menu.icon クラスは、小型画面の場合、トップバー内のリンクを右上隅のボタンに置き換えます。
ボタンがクリックされた場合にのみ、トップバーが表示されます。
チップ: 効果を確認するために、ブラウザウィンドウのサイズを変更してください。
.top-bar-section は、ナビゲーションリンクのセクションを定義します。
.left クラスは、リンクが左揃えになることを表します。
.active クラスは、ユーザがどのページにいるかを知らせるとともに、リンクに青色の背景色を追加します。
チップ:want the ナビゲーションリンクを右揃えにする場合は、
.left クラスを .right に変更します：
これはまた、左と右に揃えることもできます：
<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>
結果：
トップバーのリンクを分割するためには、.divider クラスを使用します（大型画面では垂直のボーダーが、
小型画面では（リンクがスタックされるときには）水平のボーダーが追加されます）：
<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>
結果：
トップバー内のナビゲーションリンクも、ドロップダウンメニューを持つことができます。
class="dropdown" を持つ <ul> 要素に続けて、<li> 要素の 1 つに
.has-dropdown クラス追加することで、ドロップダウンメニューを作成します：
<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>
結果：
ドロップダウンメニュー内のリンクを分離するために .divider クラスを使用します（水平方向のボーダーを追加）：
<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>
結果：
ドロップダウンメニューの中にラベル/ヘッダを追加するために、<li> の内部に
<label> 要素を使用します：
<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>
結果：
ドロップダウンは、ネスト（ドロップダウン内のドロップダウン）することもできます：
<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>
結果：
トップバーにあるドロップダウンは、デフォルトでは、ホバーによりメニューを開きます。代わりに、クリックにより
メニューを開くようにする場合は、<nav> に data-options="is_hover: false" 属性を追加します：
トップバー内にボタンを配置することができます：
トップバー内には、アイコンも配置することができます。ただ、アイコンのスタイルシートに、リンクすることを忘れないでください。 詳細については、Foundation アイコンチュートリアルをお読みください：
<head>
<!-- Link to Foundation Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/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>
結果：
トップバーは、ページの上部に固定することができます。
固定トップバーは、ページスクロールから独立して、固定した位置（上）に表示されたままになり。
上部に固定されたナビゲーションバーを作成するためには、<div class="fixed"> 内に
トップバーをラップします：
<div class="sticky"> でトップバーをラップし、マークアップ内のどこにでも置くこともできます。
ナビゲーションバーは、ブラウザウィンドウの上部に達したときに、ユーザがスクロールを続けると、固定トップバーのように振舞い、
上部に粘りつきます：
.sticky クラスを使用する場合、デフォルトで、トップバーはすべての画面サイズにおいて粘着になります。
粘着が単に小型、中型または大型画面の上でのみ動作するようにしたい場合は、<nav> に
data-options="sticky_on: small|medium|large" を追加するようにします：
<div class="sticky">
<!-- Only sticky on large screens -->
<nav class="top-bar" data-topbar data-options="sticky_on: large">
..
</nav>
</div>
または、複数のサイズに粘着性の動作を指定するには配列を渡します：
<div class="sticky">
<!-- Sticky on small AND
large screens (NOT medium)-->
<nav class="top-bar" data-topbar data-options="sticky_on:
[small, large]">
..
</nav>
</div>