グローバルナビゲーションとは

サイト共通のヘッダーに置かれる、主要ページへのリンクを横並びにしたメニュー。

概要

サイトのどのページにも共通して表示されるヘッダー内のメニューで、主要なページへのリンクを横一列に並べたものです。今どのページを見ているかをリンクの見た目（太字や下線など）で示す「現在地表示」を伴うことが多いです。

別名

表記ゆれ：グローバルナビ、グロナビ、ヘッダーメニュー、メインナビ、global navigation、GNAV

現場では省略して「グロナビ」と呼ばれることが最も多く、資料上は「グローバルナビゲーション」と正式名称で書かれます。

AI への伝え方

「グローバルナビゲーションを付けて」「グロナビを実装して」で通じます。現在いるページのリンクをどう強調するか（太字・下線・色を変えるなど）を伝えると、意図どおりの見た目になります。

似たパーツとの違い

グローバルナビゲーションはサイト全体の主要な導線を担うのに対し、「メガメニュー」はその中の 1 項目にカーソルを合わせたときに、さらに多くのリンクを一覧表示する拡張版です。「フッター」も共通のリンク集ですが、ページ下部に置かれる補助的な情報（利用規約・サイトマップなど）が中心という違いがあります。

デモ

コード

HTML

<header class="global-navigation-demo">
  <span class="global-navigation-demo__logo">Sample Site</span>
  <nav class="global-navigation-demo__nav" aria-label="グローバルナビゲーション">
    <ul class="global-navigation-demo__list">
      <li><a href="#" aria-current="page">トップ</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">実績</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

CSS

.global-navigation-demo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: sans-serif;
  flex-wrap: wrap;
  gap: 12px;
}

.global-navigation-demo__logo {
  font-weight: bold;
}

.global-navigation-demo__list {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.global-navigation-demo__list a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
}

.global-navigation-demo__list a:hover {
  color: #0017c1;
}

.global-navigation-demo__list a[aria-current="page"] {
  color: #0017c1;
  font-weight: bold;
  border-bottom-color: #0017c1;
}