Header

The Header component is a layout component for website top navigation, providing logo, navigation menu, language switching, and other functions.

Basic Usage

---
/**
 * @component Header.Basic
 *
 * @description
 * Header组件的基础示例，展示最基本的顶部导航栏，包含logo和语言切换功能。
 * 演示如何传入完整的 astro:i18n 模块以支持语言切换。
 */
import { Header } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
import * as astroI18n from 'astro:i18n';

const logo = getExampleImage({
  width: 100,
  height: 100,
  provider: 'picsum',
  tag: 'tech',
});
---

<Header logoHref={logo} rounded="lg" sticky={false} astroI18n={astroI18n} />

---
/**
 * @component Header.WithNavigation
 *
 * @description
 * 带导航菜单的Header组件示例，展示如何添加导航菜单项。
 */
import { Header } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
import * as astroI18n from 'astro:i18n';

const logo = getExampleImage({
  width: 100,
  height: 100,
  provider: 'picsum',
  tag: 'tech',
});

const navItems = [
  { href: '/', title: '首页' },
  { href: '/docs', title: '文档' },
  { href: '/components', title: '组件' },
  { href: '/about', title: '关于' },
];
---

<Header
  logoHref={logo}
  navItems={navItems}
  rounded="lg"
  sticky={false}
  astroI18n={astroI18n}
/>

Without Language Switcher

When the astroI18n parameter is not passed, the Header component will not display the language switching functionality.

---
/**
 * @component Header.WithoutI18n
 *
 * @description
 * Header组件的无i18n示例，展示在不启用国际化功能时的基本用法。
 * 此示例不会显示语言切换器。
 */
import { Header } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

const logo = getExampleImage({
  width: 100,
  height: 100,
  provider: 'picsum',
  tag: 'tech',
});
---

<Header logoHref={logo} rounded="lg" sticky={false} />

Custom Left Content

---
/**
 * @component Header.CustomNavbarStart
 *
 * @description
 * 自定义导航栏左侧内容的Header组件示例，展示如何使用slot自定义左侧内容。
 */
import { Header } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
import * as astroI18n from 'astro:i18n';

const logo = getExampleImage({
  width: 100,
  height: 100,
  provider: 'picsum',
  tag: 'tech',
});
---

<Header logoHref={logo} rounded="lg" sticky={false} astroI18n={astroI18n}>
  <div
    slot="navbar-start"
    class="cosy:flex cosy:items-center cosy:gap-2 cosy:ml-2">
    <button class="cosy:btn cosy:btn-sm cosy:btn-primary">联系我们</button>
    <span class="cosy:badge cosy:badge-outline">在线咨询</span>
  </div>
</Header>

Custom Middle Content

---
/**
 * @component Header.CustomNavbarCenter
 *
 * @description
 * 自定义导航栏中间内容的Header组件示例，展示如何使用slot自定义中间内容。
 */
import { Header } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
import * as astroI18n from 'astro:i18n';

const logo = getExampleImage({
  width: 100,
  height: 100,
  provider: 'picsum',
  tag: 'tech',
});
---

<Header logoHref={logo} rounded="lg" sticky={false} astroI18n={astroI18n}>
  <div slot="navbar-center" class="cosy:flex cosy:items-center cosy:gap-4">
    <span class="cosy:badge cosy:badge-accent">新功能</span>
    <div class="cosy:divider cosy:divider-horizontal"></div>
    <span class="cosy:badge cosy:badge-secondary">热门</span>
    <div class="cosy:divider cosy:divider-horizontal"></div>
    <span class="cosy:badge">推荐</span>
  </div>
</Header>

Custom Right Content

---
/**
 * @component Header.CustomNavbarEnd
 *
 * @description
 * 自定义导航栏右侧内容的Header组件示例，展示如何使用slot自定义右侧内容。
 */
import { Header } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
import * as astroI18n from 'astro:i18n';

const logo = getExampleImage({
  width: 100,
  height: 100,
  provider: 'picsum',
  tag: 'tech',
});
---

<Header logoHref={logo} rounded="lg" sticky={false} astroI18n={astroI18n}>
  <div slot="navbar-end" class="cosy:flex cosy:items-center cosy:gap-2">
    <button class="cosy:btn cosy:btn-sm cosy:btn-ghost">登录</button>
    <button class="cosy:btn cosy:btn-sm cosy:btn-primary">注册</button>
  </div>
</Header>