导航栏是几乎所有网站都会用到的界面元素。在桌面端它通常横向排布，在手机端则往往需要折叠成汉堡菜单。如果只用浮动和定位来写响应式导航，会面临清除浮动、计算宽度、处理断点等一系列琐碎问题。UIkit作为一款轻量级的前端框架，提供了专门的navbar组件，而且它内部大量使用flex布局，这让响应式导航的搭建变得直观很多。

这篇文章会从最基础的navbar结构开始，逐步添加flex对齐控制、响应式断点以及移动端切换按钮，最终得到一个完整的自适应导航栏。代码示例均基于UIkit 3.x版本，不依赖jQuery，只需要引入对应的CSS和JavaScript文件。

navbar组件的基础结构

UIkit的navbar组件由几个核心类构成。最外层通常是一个<nav>元素，给它加上uk-navbar-container类可以设置背景色、高度和内边距，同时作为导航的定位上下文。内层需要再放一个容器，官方推荐使用uk-navbar类，这个类本身就是一个flex容器，它会让内部所有直接子元素按行排列。

下面是一段最基础的导航结构：

<nav class="uk-navbar-container">
  <div class="uk-navbar">
    <div class="uk-navbar-left">
      <ul class="uk-navbar-nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
      </ul>
    </div>
  </div>
</nav>

这段代码中uk-navbar-left表示导航内容靠左对齐。如果你还想在右侧放置登录按钮或搜索框，可以再加一个uk-navbar-right。重要的是，uk-navbar已经声明了display: flex，所以左右两个区域会自动被推到两端，不需要额外清除浮动。

另外注意，uk-navbar-nav内部的<li>元素默认也是flex项，而且每个链接都有足够的内边距，方便点击。如果想要去掉默认的下划线样式，可以直接覆盖CSS，不影响响应式行为。

结合flex控制导航项分布

仅仅靠uk-navbar-left和uk-navbar-right只能实现左中右布局。当导航项数量较多，或者需要让链接平均分布在整个导航栏宽度时，就需要显式使用UIkit的flex工具类。UIkit提供了uk-flex、uk-flex-between、uk-flex-around、uk-flex-center等类，对应不同的justify-content值。

例如，要让导航项在桌面端均匀分布，可以给包含<ul>的父级加上uk-flex uk-flex-between，同时把<ul>本身的宽度设置为100%。也可以直接给uk-navbar添加uk-flex-between，让它内部的两个区域分别靠左和靠右，这其实就是默认行为。更精细的控制是给uk-navbar-nav设置宽度并让它内部子项等分空间。

.uk-navbar-nav {
  width: 100%;
  justify-content: space-between;
}

不过UIkit推荐尽量使用现成的工具类，避免手写过多CSS。比如在移动端想让导航项垂直堆叠，可以引入uk-flex-column。结合断点类uk-flex-column@s，可以做到从小屏幕开始改为纵向排列，而大屏幕保持横向。这种组合方式比手写媒体查询更加声明式，也更容易维护。

flex在navbar组件中还有一个作用：当导航项文字长度不一致时，默认是左对齐，视觉上可能会出现右侧留白不均。使用uk-flex-around可以在每个链接周围增加相等的间距，让整个导航看起来更饱满。对于多级菜单，子菜单的定位同样依赖父级元素的flex上下文，所以理解这些工具类对后续扩展很有帮助。

实现移动端折叠导航

响应式导航最关键的一步是在小屏幕下把横向链接隐藏起来，替换成一个可点击的汉堡按钮。UIkit提供了一个专门的切换组件：uk-navbar-toggle。这个类可以放在一个<a>或<button>元素上，它会自动生成三条横线图标，并且自带点击展开收起的行为，前提是你同时引入了UIkit的JavaScript文件。

一个典型的移动端导航结构如下：

<nav class="uk-navbar-container">
  <div class="uk-navbar">
    <div class="uk-navbar-left">
      <a class="uk-navbar-toggle" href="#offcanvas-nav" uk-toggle>
        <span class="uk-navbar-toggle-icon"></span>
      </a>
      <a class="uk-logo" href="#">Brand</a>
    </div>
  </div>
</nav>

这里把uk-navbar-toggle和uk-toggle配合使用，指向一个隐藏的offcanvas面板。面板内容可以复用桌面端的导航链接，这样就不需要维护两份菜单。offcanvas本身也是UIkit的组件，通过uk-offcanvas类实现从左侧或右侧滑出的效果。

在默认情况下，uk-navbar-nav是可见的，我们需要在移动端把它隐藏。UIkit的响应式显示工具类可以完成这个任务：给桌面端导航包裹一个容器，加上uk-visible@m，表示只在中等屏幕及以上显示；切换按钮则加上uk-hidden@m，表示在中等屏幕及以上隐藏。这两个类互补，不需要写任何额外CSS。

另外，如果你不使用offcanvas而只想要简单的下拉展开，也可以利用UIkit的uk-dropdown组件，但offcanvas在移动端体验更好，因为它可以覆盖整个屏幕的一部分，菜单项纵向排列，点击区域更大。

常见问题与样式微调

使用navbar和flex组合时，有一个容易忽略的细节：当导航项很多，在较小屏幕上虽然已经折叠，但在中等屏幕可能仍然放不下，导致链接换行或溢出。解决方法是调整断点，把uk-visible@m改成uk-visible@l，或者给uk-navbar-nav添加uk-flex-nowrap和合适的间距。UIkit的断点定义在文档中有明确说明，@s对应640px，@m对应960px，@l对应1200px。

另一个问题是导航栏高度。如果你修改了logo图片的高度或者链接字体大小，默认的导航栏高度可能不够，内容会上下不居中。此时可以给uk-navbar-container设置自定义的min-height，也可以使用uk-navbar-item和uk-navbar-nav自带的对齐属性。因为uk-navbar是flex容器，垂直对齐默认就是align-items: center，只要保持内部元素高度一致，一般不会出问题。

在性能方面，UIkit的navbar和flex工具类都非常轻量，不会产生多余的JavaScript开销。唯一的脚本依赖就是切换按钮和offcanvas的交互，如果你不需要移动端折叠，甚至可以完全不加载JS。对于追求极致的开发者，可以考虑按需引入UIkit的组件，进一步减少体积。

最后，强烈建议在真实设备上测试触摸行为。uk-navbar-toggle的点击区域默认尺寸是合适的，但如果你修改了图标大小，要确保不小于44x44像素，否则移动端用户可能很难点中。配合uk-offcanvas的遮罩层，整体交互会非常自然。