← カテゴリ一覧に戻る

水平メニュー（Horizontal Menu）

ヘッダーに配置する水平ナビゲーションメニューの実装を3つのアプローチで比較。 サブメニュー・ドロップダウン・アクティブ状態・テーマ切替・レスポンシブ対応など、実践的な使用例をインタラクティブに確認できます。

antdv6.3.0primereactv10.9.7

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 DesignPrimeReactCSS / 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 で自作。多階層サブメニューは手間がかかるが、シンプルなヘッダーナビゲーションであれば十分実用的。ランディングページやポートフォリオサイトに最適。

同じカテゴリの他のページ

ブレッドクラム（Breadcrumb）

ブレッドクラムのサンプル。セパレーターカスタマイズ・アイコン統合・ドロップダウンメニュー・ルーティング連携などのUIパターン実例集。

ハンバーガーメニュー（Hamburger Menu）

ハンバーガーメニューのサンプル。アイコンアニメーション・Drawer連携・レスポンシブ制御などのUIパターン実例集。

サイドナビゲーション（NavLink）

サイドバー内のナビゲーションリンクUIの実装比較。アクティブ状態・アイコン・ネスト・バッジなど実践的なパターンをインタラクティブに確認

同じライブラリを使っているページ

バッジ・タグ（Badge / Tag）

antd

モーダル・ダイアログ（Modal / Dialog）

antd

通知・トースト（Notification / Toast）

antd
このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo