CTopNav

Menu module ngang đặt trên header — mức điều hướng cao nhất, ví dụ ĐIỀU HÀNH / BÁN HÀNG / TỔ CHỨC.

Dùng khi: sản phẩm chia thành vài module lớn, mỗi module có menu sidebar riêng.

Không dùng khi: chỉ có một module — bỏ trống topNav trong app.config.ts là header gọn lại.

<script setup lang="ts">
import { ref } from 'vue'
import type { NavItem } from '@tasco/ui'

// Menu module ngang trên header. Chỉ dùng item MỘT cấp.
const items: NavItem[] = [
  { label: 'Điều hành', path: '/' },
  { label: 'Bán hàng', path: '/orders' },
  { label: 'Tổ chức', path: '/org' },
]

const activePath = ref('/orders')
</script>

<template>
  <div>
    <div
      style="
        background: var(--tasco-color-surface);
        border: 1px solid var(--tasco-color-border);
        border-radius: var(--tasco-radius-lg);
        padding: 4px 8px;
      "
    >
      <CTopNav
        :items="items"
        :active-path="activePath"
        @navigate="(path: string) => (activePath = path)"
      />
    </div>
    <p style="color: var(--tasco-color-text-muted)">
      Đang ở <code>{{ activePath }}</code>
    </p>
  </div>
</template>

Dùng trong app

// app/app.config.ts
export default defineAppConfig({
  tasco: {
    topNav: [
      { label: 'Điều hành', path: '/' },
      { label: 'Bán hàng', path: '/orders' },
    ],
  },
})

Layout của layer đã lắp CTopNav vào header, nên dự án chỉ khai cấu hình. Gọi trực tiếp component chỉ khi tự dựng layout riêng.

Khác gì CSideNav

	CTopNav	CSideNav
Vị trí	Header	Sidebar
Cấp	Một cấp, không có children	Hai cấp
Icon	Không dùng	Nên có
Vai trò	Chuyển giữa các module lớn	Điều hướng trong một module

Cùng kiểu NavItem, cùng quy tắc chọn mục đang mở (tiền tố dài nhất của active-path), cùng sự kiện @navigate.

API

Props

Tên	Kiểu	Mặc định	Mô tả
items*	NavItem[]	—	Menu module ngang trên header; chỉ dùng item một cấp.
activePath	string	''	Đường dẫn hiện tại để tô sáng item đúng.

Sự kiện

Tên	Payload	Mô tả
navigate	[path: string]	Bấm item có `path` — router-agnostic, layer gọi navigateTo.

Lưu ý

• Ba đến năm mục là vừa; nhiều hơn thì header vỡ trên màn hình hẹp.
• Lọc theo quyền ở lớp gọi bằng filterByPermission, như với sidebar.
• Nhãn viết ngắn, không dấu chấm câu — đây là nhãn điều hướng, không phải câu.

Liên quan

• CSideNav, CAppLayout.
• Khung giao diện.