水平メニュー（Horizontal Menu）
ヘッダーに配置する水平ナビゲーションメニューの実装を3つのアプローチで比較。 サブメニュー・ドロップダウン・アクティブ状態・テーマ切替・レスポンシブ対応など、実践的な使用例をインタラクティブに確認できます。
Ant Design Menu
Ant DesignのMenuコンポーネントはmode="horizontal"でヘッダー用の水平ナビゲーションを構築。items配列で宣言的に定義でき、サブメニュー・アイテムグループ・テーマ切替（light/dark）を標準サポート。
mode="horizontal"サブメニュー標準対応light/darkテーマitems宣言的APIアイコン統合
読み込み中...
tsx
'use client';
import { useState } from 'react';
import { ConfigProvider, Menu } from 'antd';
import { HomeOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
const items = [
{ key: 'home', icon: <HomeOutlined />, label: 'ホーム' },
{
key: 'services',
icon: <AppstoreOutlined />,
label: 'サービス',
children: [
{ key: 'web', label: 'Web制作' },
{ key: 'app', label: 'アプリ開発' },
],
},
{ key: 'settings', icon: <SettingOutlined />, label: '設定' },
];
export function AntMenuDemo() {
const [current, setCurrent] = useState('home');
return (
<ConfigProvider theme={{ token: { colorPrimary: '#1677ff' } }}>
<Menu
mode="horizontal"
selectedKeys={[current]}
onClick={(e) => setCurrent(e.key)}
items={items}
/>
</ConfigProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Ant Designを使った水平メニューUIを実装してください。 - 使用ライブラリ: antd の Menu コンポーネント + @ant-design/icons - mode="horizontal" で水平ナビゲーション - items 配列で宣言的にメニューを定義 - children でサブメニュー（ドロップダウン）を実装、2階層ネスト対応 - selectedKeys で現在のアクティブ項目をハイライト - theme prop で light / dark テーマ切替 - アイコン: @ant-design/icons を各メニュー項目に配置
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Ant Design | PrimeReact | CSS / Tailwind |
|---|---|---|---|
| 水平メニューコンポーネント | ✅ Menu mode="horizontal" | ✅ Menubar 専用コンポーネント | ⚠️ 自作 |
| サブメニュー（ドロップダウン） | ✅ children でネスト | ✅ items でネスト | ⚠️ hover + absolute で自作 |
| 多階層サブメニュー | ✅ 無制限ネスト | ✅ 無制限ネスト | ⚠️ 自作（手間が大きい） |
| アクティブ状態 | ✅ selectedKeys で制御 | ⚠️ className で自前対応 | ✅ state で自由に制御 |
| テーマ切替 | ✅ theme="light" / "dark" | ✅ テーマCSS切替 | ✅ CSS変数で管理 |
| ロゴ/アクション配置 | ⚠️ Layout.Header と組み合わせ | ✅ start / end スロット | ✅ flex で自由配置 |
| レスポンシブ（ハンバーガー切替） | ❌ 非対応（自作が必要） | ✅ 標準で内蔵 | ⚠️ 自作 |
| アイコン統合 | ✅ @ant-design/icons | ✅ PrimeIcons | ⚠️ 手動で配置 |
| 宣言的API | ✅ items 配列 | ✅ model 配列 | ⚠️ 自作 |
| アクセシビリティ | ✅ WAI-ARIA準拠 | ✅ WAI-ARIA完全対応 | ⚠️ 実装者次第 |
| TypeScript | ✅ 完全サポート | ✅ 完全サポート | ✅ 完全サポート |
| バンドルサイズ追加 | ⚠️ 中 | ⚠️ 中 | ✅ ゼロ追加 |
選択のポイント
- Ant Design — Menu mode="horizontal" は items 配列による宣言的な定義、多階層サブメニュー、light/dark テーマ切替を標準装備。selectedKeys によるアクティブ状態の管理も明快。ただしレスポンシブ時のハンバーガー切替は自前で実装する必要がある。Ant Design ベースのプロジェクトや管理画面のヘッダーナビゲーションに最適。
- PrimeReact — Menubar は水平ナビバーに特化した唯一の専用コンポーネント。start/end スロットでロゴやアクションボタンを柔軟に配置でき、モバイルでのハンバーガー切替も標準で内蔵。WAI-ARIA 対応も最も充実しており、コーポレートサイトやSaaSのヘッダーに向いている。
- CSS / Tailwind CSS — ゼロ依存でバンドルサイズを最小化しつつ、デザインの完全なコントロールが可能。ホバーでのドロップダウンやアクティブ状態のハイライトを flex + absolute で自作。多階層サブメニューは手間がかかるが、シンプルなヘッダーナビゲーションであれば十分実用的。ランディングページやポートフォリオサイトに最適。