CutestUI 导航组件

HTML 结构：

<nav class="nav">
    <ul class="nav-list">
        <li class="nav-item"><a href="#" class="nav-link">首页</a></li>
        <li class="nav-item"><a href="#" class="nav-link -active">产品</a></li>
        <li class="nav-item"><a href="#" class="nav-link">服务</a></li>
        <li class="nav-item"><a href="#" class="nav-link">关于我们</a></li>
        <li class="nav-item"><a href="#" class="nav-link">联系我们</a></li>
    </ul>
</nav>

添加 -underline 类实现下划线效果，当鼠标悬停或激活时显示下划线。

<nav class="nav -underline">...</nav>

添加 -pill 类实现药丸形状的导航菜单。

<nav class="nav -pill">...</nav>

添加 -rounded 类实现圆角样式的导航菜单。

<nav class="nav -rounded">...</nav>

添加 -background 类实现带背景色的导航菜单。

<nav class="nav -background">...</nav>

添加 -dark 类实现深色主题的导航菜单。

<nav class="nav -dark">...</nav>

添加 -transparent 类实现透明背景的导航菜单，配合毛玻璃效果。

<nav class="nav -transparent">...</nav>

添加 -vertical 类实现垂直方向的导航菜单。

<nav class="nav -vertical">...</nav>

添加 -centered 类实现居中对齐的导航菜单。

<nav class="nav -centered">...</nav>

添加 -justified 类实现两端对齐的导航菜单。

<nav class="nav -justified">...</nav>

添加 -has-dropdown 类实现下拉菜单效果，悬停时显示下拉内容。支持无限级嵌套下拉菜单。

<nav class="nav">
    <ul class="nav-list">
        <li class="nav-item -has-dropdown">
            <a href="#" class="nav-link">产品</a>
            <div class="nav-dropdown">
                <ul class="nav-dropdown-list">
                    <li class="nav-dropdown-item"><a href="#" class="nav-dropdown-link">产品1</a></li>
                    <li class="nav-dropdown-item -has-dropdown">
                        <a href="#" class="nav-dropdown-link">产品3</a>
                        <div class="nav-dropdown">
                            <ul class="nav-dropdown-list">
                                <li class="nav-dropdown-item"><a href="#" class="nav-dropdown-link">子产品1</a></li>
                                <!-- 更多子产品 -->
                            </ul>
                        </div>
                    </li>
                    <!-- 更多产品 -->
                </ul>
            </div>
        </li>
        <!-- 更多菜单项 -->
    </ul>
</nav>

面包屑导航用于显示用户当前位置的层级结构，帮助用户了解和导航网站。

<ul class="nav-breadcrumb">
    <li class="nav-breadcrumb-item"><a href="#" class="nav-breadcrumb-link">首页</a></li>
    <li class="nav-breadcrumb-item"><a href="#" class="nav-breadcrumb-link">产品中心</a></li>
    <li class="nav-breadcrumb-item"><a href="#" class="nav-breadcrumb-link">智能设备</a></li>
    <li class="nav-breadcrumb-item"><a href="#" class="nav-breadcrumb-link -active">智能手表</a></li>
</ul>

侧边栏导航适用于后台管理系统或需要分类导航的网站，可配合下拉菜单使用。

<nav class="nav-sidebar">
    <ul class="nav-list">
        <li class="nav-item"><a href="#" class="nav-link">概览</a></li>
        <li class="nav-item"><a href="#" class="nav-link -active">设置</a></li>
        <li class="nav-item -has-dropdown">
            <a href="#" class="nav-link">用户管理</a>
            <div class="nav-dropdown">
                <ul class="nav-dropdown-list">
                    <li class="nav-dropdown-item"><a href="#" class="nav-dropdown-link">用户列表</a></li>
                    <!-- 更多子项 -->
                </ul>
            </div>
        </li>
        <!-- 更多菜单项 -->
    </ul>
</nav>

使用 -disabled 类禁用某个导航项，禁用的项目不会响应鼠标悬停事件。

<a href="#" class="nav-link -disabled">服务</a>

组合使用 -pill 和 -centered 类，创建居中的药丸形状导航。

<nav class="nav -pill -centered">...</nav>