ヘッダー

Headerコンポーネントは、カスタマイズ可能なタイトル、サブタイトル、ナビゲーションを提供するレスポンシブなヘッダーです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

• レスポンシブデザイン: モバイルファーストアプローチで異なる画面サイズに対応
• ナビゲーションリンク: プロパティとして渡される設定可能なナビゲーションリンク
• テーマサポート: ライトテーマとダークテーマの両方に対応
• カスタマイズ可能なコンテンツ: 柔軟なタイトルとサブタイトルテキスト
• アクセシビリティ: 適切なARIAラベルとセマンティックHTML
• モバイルドロワー: ハンバーガーメニューと背景ロック付きドロワーを自動生成

使用方法

---
import { Header } from '@karan-monorepo/ui-core';
---

<kds-header
  title="アプリケーション名"
  subtitle="アプリケーションの説明"
  navigation-links='[{"label": "ホーム", "href": "/"}, {"label": "について", "href": "#"}, {"label": "お問い合わせ", "href": "#"}]'
  theme="light"
></kds-header>

プロパティ

プロパティ	型	デフォルト	説明
title	string	"Tech Blog"	ヘッダーのメインタイトル
subtitle	string	""	オプションのサブタイトルテキスト
navigationLinks	Array<{label: string, href: string}>	[]	表示するナビゲーションリンクの配列
theme	'light' | 'dark'	'light'	カラーテーマバリエーション
logo	string	""	タイトルの左に表示するロゴ画像URL
logoAlt	string	"Logo"	ロゴ画像の代替テキスト
homeUrl	string	"/"	タイトルクリック時に遷移するURL
enableMobileMenu	boolean	true	ハンバーガーメニューとドロワーの表示可否
currentPath	string	""	現在のパス。アクティブなリンクをハイライト

使用例

Header Component

Responsive header component with navigation and customizable title/subtitle.

Basic Usage

Simple Header

With Navigation

Header with Navigation

Themes

Light Theme

Dark Theme

Actions & Mobile Menu

Header with actions

Usage Examples

Blog Header

Portfolio Header

バリエーション

Headerコンポーネントは2つのテーマをサポートします：

• light: ライトテーマ
• dark: ダークテーマ

<!-- ライトテーマ -->
<kds-header
  title="アプリケーション名"
  subtitle="アプリケーションの説明"
  theme="light"
/>

<!-- ダークテーマ -->
<kds-header
  title="アプリケーション名"
  subtitle="アプリケーションの説明"
  theme="dark"
/>

使用ケース

基本的なヘッダー

<kds-header
  title="My App"
  subtitle="素晴らしいアプリケーション"
  theme="light"
/>

ナビゲーション付きヘッダー

<kds-header
  title="Tech Blog"
  subtitle="最新のテクノロジー情報"
  navigation-links='[
    {"label": "ホーム", "href": "/"},
    {"label": "記事", "href": "/articles"},
    {"label": "カテゴリ", "href": "/categories"},
    {"label": "お問い合わせ", "href": "/contact"}
  ]'
  theme="light"
/>

シンプルなヘッダー

<kds-header
  title="ポートフォリオ"
  theme="dark"
/>

アクション付きヘッダー

<kds-header
  title="Learning App"
  subtitle="Grow every day"
  navigation-links='[
    {"label": "ログ", "href": "/"},
    {"label": "ダッシュボード", "href": "/dashboard"},
    {"label": "ToDo", "href": "/todos"}
  ]'
  current-path="/dashboard"
>
  <div slot="actions">
    <kds-theme-toggle></kds-theme-toggle>
    <kds-button variant="danger" size="sm">Logout</kds-button>
  </div>
  <div slot="mobile-actions">
    <kds-theme-toggle></kds-theme-toggle>
    <kds-button variant="danger" size="md" fullwidth>Logout</kds-button>
  </div>
</kds-header>

スタイリング

Headerコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

• タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
• カラー: ライト/ダークテーマに対応したカラートークン
• スペーシング: デザインシステムのスペーシングトークン
• レスポンシブ: モバイルファーストのレスポンシブデザイン

モバイルドロワーとスクロールロック

モバイル幅ではハンバーガーボタンが自動的に表示され、タップすると背景をロックしたサイドドロワーが開きます。ドロワーは端末幅に応じて最大幅が制御され、閉じると自動的にスクロールが復帰します。mobile-actionsスロットを使うことで、モバイル専用のアクションを安全に配置できます。

アクセシビリティ

Headerコンポーネントには適切なアクセシビリティ機能が含まれています：

• セマンティックHTMLの<header>要素を使用
• キーボードナビゲーションサポート
• 高コントラスト比による視認性の確保
• スクリーンリーダー対応の構造

ベストプラクティス

1. タイトルは簡潔で覚えやすくする
2. サブタイトルは補足情報として使用する
3. ナビゲーションリンクは論理的な順序で配置する
4. テーマはサイト全体のデザインと一致させる
5. 両方のテーマでテストして良好なコントラストと可読性を確保する
6. mobile-actionsスロットでモバイル固有の操作(例: ログアウトやテーマ切替)を提供する

ブラウザサポート

Headerコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

• CSS Grid
• CSS Custom Properties
• Web Components (Lit)

スロット

スロット名	説明
actions	デスクトップ時にヘッダー右側へ表示するアクション
mobile-actions	モバイルドロワー下部に表示するアクション群