W3.CSS提供各種導航欄：
垂直：
水平（垂直於小屏幕）：
基本的導航
在W3-導航欄類創建一個橫向導航欄：
例
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> 試一試» 有色導航欄
例
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> 試一試» 界定導航欄
例
<ul class="w3-navbar w3-border w3-light-grey">
<ul
class="w3-navbar w3-border w3-round w3-light-grey">
<ul
class="w3-navbar w3-card-8 w3-light-grey"> 試一試» 主動/電流鏈接
例
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> 試一試» Hoverable鏈接
當鼠標移到導航條中的鏈接，背景顏色將變為灰色。
如果你想在懸停不同的背景顏色，使用任何W3-hover- 色班，如果你想在懸停不同的文本顏色，使用任何W3-懸停文本顏色類：
例
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-hover-red" href="#">Home</a></li>
<li><a class="w3-hover-blue" href="#">Link 1</a></li>
<li><a
class="w3-hover-green" href="#">Link 2</a></li>
<li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul> 試一試» 右對齊鏈接
例
<ul class="w3-navbar w3-light-grey w3-border">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li
class="w3-right"><a class="w3-green" href="#">Link
3</a></li>
</ul> 試一試» 導航欄大小
更改字體大小：
更改填充：
例
<ul class="w3-navbar w3-green">
<li><a class="w3-padding-hor-16" href="#">Home</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-hor-16" href="#">Link 2</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul> 試一試» 自定義的CSS width屬性（ 注 ：在小屏幕上，他們將轉化為100％）的列表項的寬度：
例
<ul class="w3-navbar w3-dark-grey w3-center">
<li
style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
<li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul> 試一試» 導航欄使用圖標
例
<ul class="w3-navbar w3-light-grey w3-border
w3-large">
<li><a
class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul> 試一試» 導航欄下拉帶
將鼠標移動的“下拉”鏈接：
例
<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown</a>
<div
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul> 試一試» 注意：當下拉菜單的“打開”，在下拉鏈接獲取灰色背景顏色以表明它是有效的。 要覆蓋這一點，添加一個W3-hover- 色級為“下拉菜單”<LI>和<A>兩個：
提示：如果您想旁邊的下拉菜單文本的下拉符號，添加合適的圖標（如 ）：
例
<li class="w3-dropdown-hover
w3-hover-orange">
<a class="w3-hover-orange" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li> 試一試» 使用W3-下拉點擊 ，如果你喜歡單擊下拉鏈接，而不是懸停於：
例
<li class="w3-dropdown-click">
<a onclick="myFunction()" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div id="demo"
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li> 試一試» 固定導航欄
要強制導航欄留在頂部或在頁面的底部，甚至當用戶滾動頁面，環繞一個<div>元素中的<ul>和添加W3-頂部或W3底類：
折疊導航欄
當導航欄佔用了太多空間在小屏幕上，你不希望在默認情況下垂直顯示它，您可以使用實用工具類，隱藏和顯示導航欄中的具體聯繫。
在下面的例子中，在平板電腦和移動設備所示，當導航欄被替換為一個按鈕（☰）在右上角。 當點擊該按鈕，導航欄將垂直顯示：
例
試一試»Topnav
一個導航條的另一個例子，是W3-topnav類。 它類似於W3-導航欄 ，除了當你徘徊，而不是背景顏色過的鏈接，它會添加下劃線：
例
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> 試一試» 例如與字體真棒圖標
<nav class="w3-topnav w3-green">
<a href="#"><i class="fa
fa-home"></i></a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> 試一試» 側面導航
在W3-sidenav類創建一個垂直導航欄：
進入下一章詳細了解側邊導航。