如何使用Alpine.js为当前URL菜单项添加active类

需求说明 #

现有导航菜单（首页默认激活）：

<li><a href="/" class="nav-item active">Home</a></li>
<li><a href="/about" class="nav-item">About</a></li>
<li><a href="/contact" class="nav-item">Contact</a></li>
<li><a href="/services" class="nav-item">Services</a></li>

需要实现：访问对应页面时（比如/about），自动给该页菜单项添加active类，预期效果：

<li><a href="/" class="nav-item">Home</a></li>
<li><a href="/about" class="nav-item active">About</a></li>
<li><a href="/contact" class="nav-item">Contact</a></li>
<li><a href="/services" class="nav-item">Services</a></li>

核心实现方案 #

无需点击触发，直接通过Alpine.js在页面加载时判断当前路径，动态绑定类名：

完整主菜单代码 #

<ul x-data="{ isActive(path) { return window.location.pathname === path } }">
  <li><a href="/" class="nav-item" :class="{ 'active': isActive('/') }">Home</a></li>
  <li><a href="/about" class="nav-item" :class="{ 'active': isActive('/about') }">About</a></li>
  <li><a href="/contact" class="nav-item" :class="{ 'active': isActive('/contact') }">Contact</a></li>
  <li><a href="/services" class="nav-item" :class="{ 'active': isActive('/services') }">Services</a></li>
</ul>

子菜单适配处理 #

针对你提供的子菜单结构，可扩展isActive逻辑，确保子页面打开时父菜单也处于激活状态：

带激活状态的子菜单代码 #

<!-- 父菜单 -->
<li x-data="{ linkActive: false }" @mouseenter="linkActive = true" @mouseleave="linkActive = false">
  <a href="#" class="nav-item" :class="{ 'active': window.location.pathname.startsWith('/admin/products') }">Products</a>
  
  <!-- 子菜单 -->
  <ul x-show="linkActive" x-cloak x-collapse.duration.300ms class="text-gray-400">
    <li class="cursor-pointer py-2 pl-10 pr-6 transition duration-200 hover:bg-black hover:bg-opacity-30 text-gray-200 hover:text-white">
      <a href="{{route('admin.products.index')}}" class="flex items-center" :class="{ 'active': isActive('/admin/products') }">
        <span class="mr-2 text-sm">&bull;</span>
        <span class="overflow-ellipsis">All Products</span>
      </a>
    </li>
    <li class="cursor-pointer py-2 pl-10 pr-6 transition duration-200 hover:bg-black hover:bg-opacity-30 text-gray-200 hover:text-white">
      <a href="./pages/email/viewMessage.html" class="flex items-center" :class="{ 'active': isActive('/admin/products/category') }">
        <span class="mr-2 text-sm">&bull;</span>
        <span class="overflow-ellipsis">Category</span>
      </a>
    </li>
    <li class="cursor-pointer py-2 pl-10 pr-6 transition duration-200 hover:bg-black hover:bg-opacity-30 text-gray-200 hover:text-white">
      <a href="./pages/email/newMessage.html" class="flex items-center" :class="{ 'active': isActive('/admin/products/tags') }">
        <span class="mr-2 text-sm">&bull;</span>
        <span class="overflow-ellipsis">Tags</span>
      </a>
    </li>
  </ul>
</li>

关键逻辑说明 #

• x-data中定义的isActive方法会在页面加载时自动执行，对比window.location.pathname与菜单项的路径，实现自动激活
• 父菜单使用startsWith判断当前路径是否包含父路径前缀，确保子页面打开时父菜单同步激活
• 子菜单项依旧用isActive做精确路径匹配，保证当前子页的高亮状态

内容的提问来源于stack exchange，提问作者Rakesh Roy