使用 Tailwind CSS 构建响应式导航栏组件

2025-06-07

使用 Tailwind CSS 构建响应式导航栏组件

最近，我在我的 Web 项目中大量使用 Tailwind CSS，但是，与其他经典 OOCSS 框架（如 Bootstrap）相比，我遇到的一个缺点是缺少可以立即使用的组件。

Tailwind CSS 导航栏

这就是为什么我在 DEV 社区上开始撰写一系列文章，介绍如何使用 Tailwind CSS 中的实用程序类构建常用组件。

上次我向您展示了如何在 Tailwind CSS 中构建列表组组件，今天我想向您展示如何构建导航栏。

让我们开始吧。

Tailwind CSS 导航栏

首先，我们需要先构建 HTML 代码，然后使用nav标签为其设置样式，并在其中为ul菜单本身设置样式。



<nav>
  <div>
    <a href="#">
        <span>FlowBite</span>
    </a>
    <div>
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
Enter fullscreen mode Exit fullscreen mode

太棒了！现在让我们给nav和div包装元素添加一些样式。



<nav class="bg-white border-gray-200 px-2">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#">
        <span>FlowBite</span>
    </a>
    <div>
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
Enter fullscreen mode Exit fullscreen mode

ul现在让我们为及其元素添加一些样式。



<nav class="bg-white border-gray-200 px-2">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#">
        <span>FlowBite</span>
    </a>
    <div class="hidden md:block w-full md:w-auto" id="mobile-menu">
      <ul class="flex-col md:flex-row flex md:space-x-8 mt-4 md:mt-0 md:text-sm md:font-medium">
        <li>
          <a href="#" class="bg-blue-700 md:bg-transparent text-white block pl-3 pr-4 py-2 md:text-blue-700 md:p-0 rounded" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">About</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Services</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Pricing</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
Enter fullscreen mode Exit fullscreen mode

现在让我们添加一个徽标作为 SVG 元素：



<nav class="bg-white border-gray-200 px-2">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="flex">
      <svg class="h-10 mr-3" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"/><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"/><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"/></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"/></clipPath></defs></svg>
        <span class="self-center text-lg font-semibold whitespace-nowrap">FlowBite</span>
    </a>
    <div class="hidden md:block w-full md:w-auto" id="mobile-menu">
      <ul class="flex-col md:flex-row flex md:space-x-8 mt-4 md:mt-0 md:text-sm md:font-medium">
        <li>
          <a href="#" class="bg-blue-700 md:bg-transparent text-white block pl-3 pr-4 py-2 md:text-blue-700 md:p-0 rounded" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">About</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Services</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Pricing</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
Enter fullscreen mode Exit fullscreen mode

导航栏看起来应该是这样的：

Tailwind CSS 导航栏

干得好！现在的问题是，我们必须让它也能在移动设备上运行，这意味着我们需要显示一个汉堡菜单图标，点击后会切换导航栏。

移动设备上的 Tailwind CSS 导航栏

我们将使其在移动设备上运行，它将如下所示：

响应式 Tailwind CSS 导航栏

请遵循Flowbite 的快速入门指南并包含 JavaScript，以便本教程的后续部分能够正常工作。

您可以通过 NPM 安装它并将其包含在本地，或者直接包含 CDN。

通过 NPM 请求

确保已安装Node.js和Tailwind CSS。

  1. 通过运行以下命令，使用 NPM 安装 Flowbite 作为依赖项：


npm i flowbite
Enter fullscreen mode Exit fullscreen mode
  1. 在文件内需要 Flowbite 作为插件tailwind.config.js：


module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

}
Enter fullscreen mode Exit fullscreen mode
  1. 包含主要的 JavaScript 文件以使交互元素起作用：


<script src="../path/to/flowbite/dist/flowbite.js"></script>
Enter fullscreen mode Exit fullscreen mode

如果您使用 Webpack 或其他捆绑器，您也可以像这样导入它：



import 'flowbite';
Enter fullscreen mode Exit fullscreen mode

通过 CDN 包含

开始使用 FlowBite 的最快方法是通过 CDN 将 CSS 和 JavaScript 包含到您的项目中。

标签内需要以下最小化样式表head：



<link rel="stylesheet" href="https://unpkg.com/flowbite@1.1.1/dist/flowbite.min.css" />
Enter fullscreen mode Exit fullscreen mode

并在元素结束前包含以下javascript文件body：



<script src="https://unpkg.com/flowbite@1.1.1/dist/flowbite.js"></script>
Enter fullscreen mode Exit fullscreen mode

将其包含在flowbite.js项目内部后，只需在导航栏内添加以下汉堡切换按钮，切换按钮就可以工作。




<nav class="bg-white border-gray-200 px-2">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="flex">
      <svg class="h-10 mr-3" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"></path><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"></path><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"></path></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"></rect></clipPath></defs></svg>
        <span class="self-center text-lg font-semibold whitespace-nowrap">FlowBite</span>
    </a>
    <button data-collapse-toggle="mobile-menu" type="button" class="md:hidden ml-3 text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-lg inline-flex items-center justify-center" aria-controls="mobile-menu-2" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
      <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
    <div class="hidden md:block w-full md:w-auto" id="mobile-menu">
      <ul class="flex-col md:flex-row flex md:space-x-8 mt-4 md:mt-0 md:text-sm md:font-medium">
        <li>
          <a href="#" class="bg-blue-700 md:bg-transparent text-white block pl-3 pr-4 py-2 md:text-blue-700 md:p-0 rounded" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">About</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Services</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Pricing</a>
        </li>
        <li>
          <a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
Enter fullscreen mode Exit fullscreen mode

它在移动设备上的显示效果如下：

Tailwind CSS 移动导航栏

干得好！您已经构建了一个完全响应式的 Tailwind CSS 导航栏组件。如果您想查看更多使用 Tailwind CSS 构建的导航栏变体，请查看 Flowbite 提供的以下Tailwind CSS 导航栏组件。

Flowbite - Tailwind CSS 组件库

这个响应式 Tailwind CSS 导航栏只是一个更大的开源组件库 Flowbite 的一个示例。

Tailwind CSS 组件

该库包括按钮、警报、导航栏、下拉菜单、模式、日期选择器等组件，以及许多使用 Tailwind CSS 的实用程序类专门构建的组件。

文章来源：https://dev.to/themesberg/building-a-responsive-navbar-component-in-tailwind-css-1jmh
Devto 翻译
PREV
构建 Tailwind CSS 面包屑组件
NEXT
使用 .some() 和 .every() 数组方法编写更简洁的 JavaScript 代码 它们如何工作？示例总结