Header Section 顶部导航

新粗野主义风格的页面顶部导航栏，包含 Logo 文本、导航链接、CTA 按钮和响应式移动端 Sheet 抽屉菜单。

预览

Preview

BrutxUI

安装

pnpm dlx brutx-vue@latest add header-section

用法

<script setup>
import HeaderSection from '@/components/ui/header-section/HeaderSection.vue'

const navItems = [
    { label: 'Features', href: '#features' },
    { label: 'Pricing', href: '#pricing' },
    { label: 'Docs', href: '/docs' },
]

function handleCta() {
    console.log('CTA clicked')
}

function handleNav(index) {
    console.log('Nav item clicked:', navItems[index].label)
}
</script>

<template>
    <HeaderSection
        logo-text="MyApp"
        :nav-items="navItems"
        cta-text="Sign Up"
        @cta-click="handleCta"
        @nav-click="handleNav"
    />
</template>

数据类型

NavItem

interface NavItem {
    label: string
    href?: string
}

Props

属性	类型	默认值	说明
logoText	string	locale: headerSection.defaultLogoText	Logo 显示文本
navItems	NavItem[]	[]	导航链接项数组
ctaText	string	locale: headerSection.defaultCtaText	CTA 按钮文本
class	string	—	自定义 CSS 类名

事件

事件	参数	说明
cta-click	[]	点击 CTA 按钮时触发
nav-click	[index: number]	点击导航链接时触发，参数为链接索引

插槽

插槽	作用域	说明
header	—	替换 Logo 区域
default	—	替换导航链接区域
footer	—	替换 CTA 按钮区域

可访问性

• 使用语义化 <header> 元素作为根节点，作为页面顶部地标区域
• 桌面端导航使用 <nav> 包裹；移动端菜单按钮配有 sr-only 文本标签，屏幕阅读器可朗读
• 移动端菜单由 reka-ui 的 DialogRoot + SheetContent 实现，自动处理焦点陷阱、Escape 关闭与 aria-modal 状态
• 菜单内含 SheetTitle / SheetDescription，为对话框提供可被辅助设备朗读的标题与说明