首页 / 组件 / 头部导航栏组件

头部导航栏组件

网站顶部通用导航栏，包含Logo、菜单和操作区域。适用于企业官网、管理系统、云服务平台等场景，提供多种样式和响应式设计，支持自定义配置。

导航组件 云计算 响应式设计

基本用法

最基本的头部导航栏组件，包含Logo、主导航菜单和右侧操作区。

HTML 
<header class="header">
    <nav class="nav-container">
        <a href="#" class="logo">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="32" height="32" rx="6" fill="url(#paint0_linear)"/>
                <path d="M8 14C8 11.7909 9.79086 10 12 10H20C22.2091 10 24 11.7909 24 14V18C24 20.2091 22.2091 22 20 22H12C9.79086 22 8 20.2091 8 18V14Z" fill="white"/>
                <path d="M16 16.5L12 19.5V13.5L16 16.5Z" fill="#2468F2"/>
                <path d="M16 16.5L20 13.5V19.5L16 16.5Z" fill="#2468F2"/>
                <defs>
                    <linearGradient id="paint0_linear" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#2468F2"/>
                        <stop offset="1" stop-color="#4A89FE"/>
                    </linearGradient>
                </defs>
            </svg>
            智能云
        </a>
        <div class="nav-menu">
            <a href="#" class="nav-item active">首页</a>
            <a href="#" class="nav-item">产品</a>
            <a href="#" class="nav-item">解决方案</a>
            <a href="#" class="nav-item">文档</a>
            <a href="#" class="nav-item">价格</a>
            <a href="#" class="nav-item">支持</a>
        </div>
        <div class="nav-actions" style="gap: 24px; display: flex; align-items: center;">
            <a href="#" class="nav-action-item">控制台</a>
            <a href="#" class="nav-action-item">登录</a>
            <a href="#" class="nav-action-button">免费注册</a>
        </div>
        <button class="mobile-menu-toggle">
            <i class="mdi mdi-menu"></i>
        </button>
    </nav>
    
    <!-- 移动端菜单 -->
    <div class="mobile-menu">
        <a href="#" class="mobile-menu-item active">首页</a>
        <a href="#" class="mobile-menu-item">产品</a>
        <a href="#" class="mobile-menu-item">解决方案</a>
        <a href="#" class="mobile-menu-item">文档</a>
        <a href="#" class="mobile-menu-item">价格</a>
        <a href="#" class="mobile-menu-item">支持</a>
        <div class="mobile-search">
            <input type="text" class="search-input" placeholder="搜索...">
            <i class="mdi mdi-magnify search-icon"></i>
        </div>
        <a href="#" class="mobile-menu-item">控制台</a>
        <a href="#" class="mobile-menu-item">登录</a>
    </div>
</header>

带搜索框的导航栏

在标准导航栏的基础上添加搜索功能，方便用户快速查找内容。

首页 产品 解决方案 文档 价格
控制台 登录
HTML 
<header class="header">
    <nav class="nav-container">
        <a href="#" class="logo">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="32" height="32" rx="6" fill="url(#paint0_linear_search)"/>
                <path d="M8 14C8 11.7909 9.79086 10 12 10H20C22.2091 10 24 11.7909 24 14V18C24 20.2091 22.2091 22 20 22H12C9.79086 22 8 20.2091 8 18V14Z" fill="white"/>
                <path d="M16 16.5L12 19.5V13.5L16 16.5Z" fill="#2468F2"/>
                <path d="M16 16.5L20 13.5V19.5L16 16.5Z" fill="#2468F2"/>
                <defs>
                    <linearGradient id="paint0_linear_search" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#2468F2"/>
                        <stop offset="1" stop-color="#4A89FE"/>
                    </linearGradient>
                </defs>
            </svg>
            智能云
        </a>
        <div class="nav-menu">
            <a href="#" class="nav-item active">首页</a>
            <a href="#" class="nav-item">产品</a>
            <a href="#" class="nav-item">解决方案</a>
            <a href="#" class="nav-item">文档</a>
            <a href="#" class="nav-item">价格</a>
        </div>
        <div class="search-box">
            <i class="mdi mdi-magnify"></i>
            <input type="text" placeholder="搜索云产品、解决方案">
        </div>
        <div class="nav-actions" style="gap: 24px; display: flex; align-items: center;">
            <a href="#" class="nav-action-item">控制台</a>
            <a href="#" class="nav-action-button">登录</a>
        </div>
        <button class="mobile-menu-toggle">
            <i class="mdi mdi-menu"></i>
        </button>
    </nav>
    
    <!-- 移动端菜单 -->
    <div class="mobile-menu">
        <a href="#" class="mobile-menu-item active">首页</a>
        <a href="#" class="mobile-menu-item">产品</a>
        <a href="#" class="mobile-menu-item">解决方案</a>
        <a href="#" class="mobile-menu-item">文档</a>
        <a href="#" class="mobile-menu-item">价格</a>
        <div class="mobile-search">
            <input type="text" class="search-input" placeholder="搜索云产品、解决方案">
            <i class="mdi mdi-magnify search-icon"></i>
        </div>
        <a href="#" class="mobile-menu-item">控制台</a>
        <a href="#" class="mobile-menu-item">登录</a>
    </div>
</header>

深色模式导航栏

提供深色模式的头部导航栏，适用于偏科技感的网站或特定主题场景。

HTML 
<header class="header header-dark">
    <nav class="nav-container">
        <a href="#" class="logo">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="32" height="32" rx="6" fill="url(#paint0_linear_dark)"/>
                <path d="M8 14C8 11.7909 9.79086 10 12 10H20C22.2091 10 24 11.7909 24 14V18C24 20.2091 22.2091 22 20 22H12C9.79086 22 8 20.2091 8 18V14Z" fill="white"/>
                <path d="M16 16.5L12 19.5V13.5L16 16.5Z" fill="#2468F2"/>
                <path d="M16 16.5L20 13.5V19.5L16 16.5Z" fill="#2468F2"/>
                <defs>
                    <linearGradient id="paint0_linear_dark" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#2468F2"/>
                        <stop offset="1" stop-color="#4A89FE"/>
                    </linearGradient>
                </defs>
            </svg>
            智能云
        </a>
        <div class="nav-menu">
            <a href="#" class="nav-item active">首页</a>
            <a href="#" class="nav-item">产品</a>
            <a href="#" class="nav-item">解决方案</a>
            <a href="#" class="nav-item">文档</a>
            <a href="#" class="nav-item">价格</a>
        </div>
        <div class="search-box">
            <i class="mdi mdi-magnify"></i>
            <input type="text" placeholder="搜索云产品、解决方案">
        </div>
        <div class="nav-actions">
            <a href="#" class="nav-action-item">控制台</a>
            <a href="#" class="nav-action-button">登录</a>
            <div class="theme-switch">
                <i class="mdi mdi-weather-sunny"></i>
            </div>
        </div>
        <button class="mobile-menu-toggle">
            <i class="mdi mdi-menu"></i>
        </button>
    </nav>
</header>

响应式导航栏

根据屏幕尺寸自动调整导航栏布局，在移动设备上显示为汉堡菜单，提供良好的移动端体验。

首页 产品 解决方案 文档 价格 支持
控制台 登录

调整浏览器窗口大小或在移动设备上查看此组件以体验响应式效果

JavaScript 
// 移动菜单切换
document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
    const navMenu = document.querySelector('.nav-menu');
    
    if (mobileMenuToggle && navMenu) {
        mobileMenuToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            
            // 切换图标
            const icon = this.querySelector('i');
            if (icon.classList.contains('mdi-menu')) {
                icon.classList.remove('mdi-menu');
                icon.classList.add('mdi-close');
            } else {
                icon.classList.remove('mdi-close');
                icon.classList.add('mdi-menu');
            }
        });
    }
    
    // 点击导航项关闭移动菜单
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => {
        item.addEventListener('click', function() {
            if (window.innerWidth <= 768) {
                navMenu.classList.remove('active');
                
                // 恢复图标
                const icon = mobileMenuToggle.querySelector('i');
                icon.classList.remove('mdi-close');
                icon.classList.add('mdi-menu');
            }
        });
    });
    
    // 窗口大小变化时处理
    window.addEventListener('resize', function() {
        if (window.innerWidth > 768) {
            navMenu.classList.remove('active');
            
            // 恢复图标
            const icon = mobileMenuToggle.querySelector('i');
            if (icon) {
                icon.classList.remove('mdi-close');
                icon.classList.add('mdi-menu');
            }
        }
    });
});

API 文档

头部导航栏组件的属性、类名和方法的详细说明。

CSS 类名

类名 描述 默认值
header 顶部导航栏容器 -
header-dark 深色模式导航栏 -
nav-container 导航栏内容容器 -
logo 网站Logo和标题 -
nav-menu 主导航菜单容器 -
nav-item 导航菜单项 -
nav-item.active 当前活动的导航项 -
search-box 搜索框容器 -
nav-actions 右侧操作区域容器 -
nav-action-item 操作区域链接 -
nav-action-button 操作区域按钮 -
mobile-menu-toggle 移动端菜单切换按钮 -
dropdown-container 下拉菜单容器 -
dropdown-menu 下拉菜单内容 -
dropdown-item 下拉菜单项 -
theme-switch 主题切换按钮 -

JavaScript 方法

方法名 描述 参数
toggleMobileMenu() 切换移动端菜单的显示/隐藏状态 -
toggleTheme() 切换明暗主题 -
setActiveItem(item) 设置当前活动导航项 item: 导航项元素或ID
hideDropdowns() 隐藏所有下拉菜单 -

配置选项

选项 类型 默认值 描述
固定顶部 Boolean true 导航栏是否固定在页面顶部
深色模式 Boolean false 是否启用深色模式
响应式断点 Number 768 切换到移动菜单的屏幕宽度断点（像素）
显示搜索框 Boolean false 是否显示搜索框
显示主题切换 Boolean false 是否显示主题切换按钮

全部产品

计算

GPU云服务器
高性能计算和图形处理的GPU实例
云服务器
安全稳定、弹性可扩展的计算服务
轻量应用服务器
简单易用、稳定可靠的云端服务器
百度大脑·弹性伸缩服务器
高性能、低成本的弹性计算服务
专属服务器
独享物理资源的云服务器
本地计算集群
高性能本地化计算资源池

ARM云

云手机
云端虚拟安卓手机服务
鲲鹏终端服务器
基于ARM架构的高性能服务器
鲲鹏边缘计算盒
支持边缘AI推理与计算的硬件设备