Primitive — điều hướng

Menu, dropdown, breadcrumb.

import { CDropdown, CMenu, CMenuItem, CBreadcrumb, CBreadcrumbItem } from '@tasco/ui'

Khi nào dùng cái nào

Việc	Dùng
Menu sidebar của app	CSideNav — không dựng bằng CMenu
Menu module ngang	CTopNav
Breadcrumb đầu trang	CPageHeader với prop breadcrumb
Menu thao tác của một dòng bảng	CDropdown + CMenu + CMenuItem
Menu tài khoản trên header	CDropdown + CMenu

Ba component C* ở cột phải đã xử lý sẵn active state, quyền và điều hướng router-agnostic — dựng lại bằng primitive là tự chuốc việc.

Menu thao tác trong bảng

<script setup lang="ts">
import { CDropdown, CMenu, CMenuItem } from '@tasco/ui'
import { IconDots } from '@tabler/icons-vue'

function onAction(info: { key: string | number }, record: Order) {
  if (info.key === 'edit') return navigateTo(`/orders/${record.id}/edit`)
  if (info.key === 'delete') return remove(record)
}
</script>

<template>
  <CDropdown :trigger="['click']">
    <CButton variant="text" size="sm" aria-label="Thao tác">
      <template #icon><IconDots :size="16" /></template>
    </CButton>
    <template #overlay>
      <CMenu @click="(info) => onAction(info, record as Order)">
        <CMenuItem key="edit">Sửa</CMenuItem>
        <CMenuItem key="delete" danger>Xoá</CMenuItem>
      </CMenu>
    </template>
  </CDropdown>
</template>

• :trigger="['click']" — mở bằng click, đừng mở khi rê chuột: trên cảm ứng không có trạng thái rê.
• Nút mở menu chỉ có icon nên bắt buộc aria-label.
• Chặn quyền cho từng mục bằng v-can trên CMenuItem, hoặc lọc danh sách mục trước khi render.
• Một hai hành động thì đặt nút thẳng ra ngoài; từ ba trở lên mới gom vào menu.

Breadcrumb

Trang bình thường dùng CPageHeader:

<CPageHeader :breadcrumb="[{ title: 'Đơn hàng', to: '/orders' }, { title: order.code }]" @navigate="navigateTo" />

Chỉ dùng CBreadcrumb trực tiếp khi cần đặt breadcrumb ở chỗ khác (ví dụ trong drawer nhiều cấp).

Lưu ý

• CDropdown dùng Teleport → bọc <ClientOnly> nếu route có SSR.
• Menu mở ra phải đóng được bằng Esc; đừng chặn sự kiện bàn phím trong nội dung menu.
• Mục nguy hiểm dùng prop danger để phân biệt màu, nhưng nhãn vẫn phải nói rõ ("Xoá đơn").

Liên quan

• CSideNav · CTopNav · CPageHeader.
• Cột và ô dữ liệu — cột hành động.