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类创建一个垂直导航栏：
进入下一章详细了解侧边导航。