导航栏 - 导航链接

在创建「Navbar 导航栏」的时候，WebFlow会自动添加几个默认的导航链接。你可以选择直接编辑或者删除它们，或者添加更多导航链接。

添加导航链接盒子的步骤 - 方法一

在「Navbar 导航栏」种，选择任意盒子，然后切换到「Settings 设置」面板。在「Navbar Settings 导航栏设置」下，点击「Add Link 添加链接」按钮。

这里「Add Link 添加链接」按钮，添加的是链接的盒子。在这一节的最后，我们会给这个盒子，添加一个链接，链接到其他的页面。

页面上就会添加一个「Nav Link 导航链接」盒子。

还有一个添加导航栏链接的办法，这是更为推荐的方法：就是直接拷贝粘贴一个现成的导航栏链接，在拷贝的同时，相关的Class也会同时被复制，这样更有效率。

切换到「Navigator 盒子层级」面板。留下一个「Nav Link 导航链接」盒子，把其他的「Nav Link 导航链接」盒子全部删除。

很重要的一点，所有的导航栏链接要使用相同的class，之后编辑CSS样式时，就可以保证所有的盒子样式一致。

在之后的章节中，我们会开始编辑导航栏的样式，现在提前准备好class，供之后的教程使用。

选中这最后一个「Nav Link 导航链接」盒子，点击给它添加一个Class「my nav link」，输入class名称完毕后，按下键盘上的回车键确认。

添加Class的操作，可以在「15. Tab选项卡 - 添加class与修改CSS」中找到。

添加class后，切换到「Navigator 导航器」面板。在面板内，「Nav Link 导航链接」盒子的名字也会更新成刚刚添加的class名字。从这里开始，之后的教程，就统一称呼为「my nav link」盒子。

保持这最后一个「my nav link」盒子的选中状态，拷贝并粘贴「my nav link」盒子。

现在，所有的「my nav link」盒子都有了相同的Class。

双击这个盒子，编辑链接的内容。

编辑结束后，下一步就可以添加链接。

最后，点击「预览」观看效果。