ChuFix UI v0.2.1
开发预览 更新于 2026-05-10

NavMenu 主导航

顶部水平导航栏，每一项可挂富面板（多列链接 + 描述），3 种 variant、hover / click 触发。

基础用法

items 是顶层菜单数组，每项要么是简单链接（href），要么有 links[] 子列表。后者会在 hover / click 时打开富面板，每条 link 可带 description 和 icon。columns 控制面板每行多少列（1 / 2 / 3）。

背景 
<script setup lang="ts">
import { ref } from 'vue';
import { CfNavMenu, type NavMenuItem } from '@chufix-design/vue';

const active = ref('products');
const items: NavMenuItem[] = [
  {
    key: 'products',
    label: '产品',
    columns: 2,
    links: [
      { label: '组件库', description: 'Vue 3 与 React 双框架同源', href: '#' },
      { label: 'Tokens', description: 'OKLCH 设计变量与三套主题', href: '#' },
      { label: '图标', description: '16x16 sprite，CSS currentColor', href: '#' },
      { label: 'CLI', description: 'npx chufix add 拷贝源码到自己仓库', href: '#' },
    ],
  },
  {
    key: 'docs',
    label: '文档',
    columns: 1,
    links: [
      { label: '快速开始', href: '#' },
      { label: '主题', href: '#' },
      { label: '组件清单', href: '#' },
    ],
  },
  { key: 'pricing', label: '价格', href: '#' },
  { key: 'about', label: '关于', href: '#' },
];
</script>

<template>
  <div style="background: var(--bg-1); padding: 8px 12px; border: 1px solid var(--line-1); border-radius: 8px;">
    <CfNavMenu :items="items" :active="active" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfNavMenu } from '@chufix-design/vue';

const active = ref('products');
const items= [
  {
    key: 'products',
    label: '产品',
    columns: 2,
    links: [
      { label: '组件库', description: 'Vue 3 与 React 双框架同源', href: '#' },
      { label: 'Tokens', description: 'OKLCH 设计变量与三套主题', href: '#' },
      { label: '图标', description: '16x16 sprite，CSS currentColor', href: '#' },
      { label: 'CLI', description: 'npx chufix add 拷贝源码到自己仓库', href: '#' },
    ],
  },
  {
    key: 'docs',
    label: '文档',
    columns: 1,
    links: [
      { label: '快速开始', href: '#' },
      { label: '主题', href: '#' },
      { label: '组件清单', href: '#' },
    ],
  },
  { key: 'pricing', label: '价格', href: '#' },
  { key: 'about', label: '关于', href: '#' },
];
</script>

<template>
  <div style="background: var(--bg-1); padding: 8px 12px; border: 1px solid var(--line-1); border-radius: 8px;">
    <CfNavMenu :items="items" :active="active" />
  </div>
</template>
import { CfNavMenu, type NavMenuItem } from '@chufix-design/react';

const items: NavMenuItem[] = [/* ... */];

<CfNavMenu items={items} active="products" />
import { CfNavMenu } from '@chufix-design/react';

const items= [/* ... */];

<CfNavMenu items={items} active="products" />

3 种 variant

  • underline —— 当前项底部细下划线（默认，最克制）
  • pill —— 当前项变成填充胶囊
  • minimal —— 仅文字颜色变化，无任何形状提示
背景
variant = underline（默认）
variant = pill
variant = minimal
 
<script setup lang="ts">
import { ref } from 'vue';
import { CfNavMenu, type NavMenuItem } from '@chufix-design/vue';

const a = ref('home');
const b = ref('home');
const c = ref('home');
const items: NavMenuItem[] = [
  { key: 'home', label: '首页', href: '#' },
  { key: 'docs', label: '文档', href: '#' },
  { key: 'about', label: '关于', href: '#' },
];
</script>

<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">variant = underline（默认）</div>
      <div style="background: var(--bg-1); padding: 8px 12px; border: 1px solid var(--line-1); border-radius: 8px;">
        <CfNavMenu :items="items" :active="a" variant="underline" />
      </div>
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">variant = pill</div>
      <div style="background: var(--bg-1); padding: 8px 12px; border: 1px solid var(--line-1); border-radius: 8px;">
        <CfNavMenu :items="items" :active="b" variant="pill" />
      </div>
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">variant = minimal</div>
      <div style="background: var(--bg-1); padding: 8px 12px; border: 1px solid var(--line-1); border-radius: 8px;">
        <CfNavMenu :items="items" :active="c" variant="minimal" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfNavMenu } from '@chufix-design/vue';

const a = ref('home');
const b = ref('home');
const c = ref('home');
const items= [
  { key: 'home', label: '首页', href: '#' },
  { key: 'docs', label: '文档', href: '#' },
  { key: 'about', label: '关于', href: '#' },
];
</script>

<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">variant = underline（默认）</div>
      <div style="background: var(--bg-1); padding: 8px 12px; border: 1px solid var(--line-1); border-radius: 8px;">
        <CfNavMenu :items="items" :active="a" variant="underline" />
      </div>
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">variant = pill</div>
      <div style="background: var(--bg-1); padding: 8px 12px; border: 1px solid var(--line-1); border-radius: 8px;">
        <CfNavMenu :items="items" :active="b" variant="pill" />
      </div>
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">variant = minimal</div>
      <div style="background: var(--bg-1); padding: 8px 12px; border: 1px solid var(--line-1); border-radius: 8px;">
        <CfNavMenu :items="items" :active="c" variant="minimal" />
      </div>
    </div>
  </div>
</template>
<CfNavMenu items={items} active={a} variant="underline" />
<CfNavMenu items={items} active={b} variant="pill" />
<CfNavMenu items={items} active={c} variant="minimal" />
<CfNavMenu items={items} active={a} variant="underline" />
<CfNavMenu items={items} active={b} variant="pill" />
<CfNavMenu items={items} active={c} variant="minimal" />

触发方式

trigger —— hover（默认，鼠标悬停就打开）/ click（点击触发，更适合移动端或避免误触）。

背景
trigger = hover（默认）
trigger = click
 
<script setup lang="ts">
import { ref } from 'vue';
import { CfNavMenu, type NavMenuItem } from '@chufix-design/vue';

const a = ref('products');
const b = ref('products');
const items: NavMenuItem[] = [
  {
    key: 'products',
    label: '产品',
    columns: 1,
    links: [
      { label: '组件库', href: '#' },
      { label: 'Tokens', href: '#' },
      { label: '图标', href: '#' },
    ],
  },
  { key: 'docs', label: '文档', href: '#' },
];
</script>

<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">trigger = hover（默认）</div>
      <div style="background: var(--bg-1); padding: 8px 12px; border: 1px solid var(--line-1); border-radius: 8px;">
        <CfNavMenu :items="items" :active="a" trigger="hover" />
      </div>
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">trigger = click</div>
      <div style="background: var(--bg-1); padding: 8px 12px; border: 1px solid var(--line-1); border-radius: 8px;">
        <CfNavMenu :items="items" :active="b" trigger="click" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfNavMenu } from '@chufix-design/vue';

const a = ref('products');
const b = ref('products');
const items= [
  {
    key: 'products',
    label: '产品',
    columns: 1,
    links: [
      { label: '组件库', href: '#' },
      { label: 'Tokens', href: '#' },
      { label: '图标', href: '#' },
    ],
  },
  { key: 'docs', label: '文档', href: '#' },
];
</script>

<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">trigger = hover（默认）</div>
      <div style="background: var(--bg-1); padding: 8px 12px; border: 1px solid var(--line-1); border-radius: 8px;">
        <CfNavMenu :items="items" :active="a" trigger="hover" />
      </div>
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">trigger = click</div>
      <div style="background: var(--bg-1); padding: 8px 12px; border: 1px solid var(--line-1); border-radius: 8px;">
        <CfNavMenu :items="items" :active="b" trigger="click" />
      </div>
    </div>
  </div>
</template>
<CfNavMenu items={items} active={a} trigger="hover" />
<CfNavMenu items={items} active={b} trigger="click" />
<CfNavMenu items={items} active={a} trigger="hover" />
<CfNavMenu items={items} active={b} trigger="click" />

API

属性类型默认值说明
itemsNavMenuItem[][]顶级菜单条目
activestring—当前活动项的 key，影响下划线 / 高亮
variant'underline' | 'pill' | 'minimal''underline'视觉模式
trigger'hover' | 'click''hover'富面板的触发方式

类型导出：

interface NavMenuItem {
  key: string;
  label: string;
  href?: string;
  links?: NavMenuLink[];
  columns?: 1 | 2 | 3;
  disabled?: boolean;
}
interface NavMenuLink {
  label: string;
  description?: string;
  href: string;
  icon?: VNode | ReactNode;
}

事件：navigate(item)（React 端：onNavigate），仅在简单链接被点击（无 links 子项）时触发。

反馈与讨论

NavMenu 主导航 的讨论

0
0 / 600
一键发送
正在加载评论...