# Page Header

A page header defines the top of a page. It contains a title/breadcrumb trail combined with a context selector, and header actions.

## Visual Structure

```
ga-page-header
  ├── ga-page-header__global-navigation
  │   ├── ga-page-header__menu-breadcrumbs
  │   │   ├── ga-button ga-button--secondary ga-button--icon-only (hamburger menu)
  │   │   └── ga-breadcrumb
  │   └── ga-page-header__header-actions
  │       ├── ga-select (context selector)
  │       ├── ga-button ga-button--transparent (text action e.g. Feedback)
  │       └── ga-button ga-button--secondary ga-button--icon-only (one per icon action)
  │           └── ga-icon
  └── ga-page-header__page-navigation
      ├── ga-page-header__page-nav-start
      └── ga-page-header__page-nav-end
```

## Elements Hierarchy

### Core Block

- `ga-page-header` - Main container, full-width vertical stack

### Global Navigation Row

- `ga-page-header__global-navigation` - The top bar containing the breadcrumb and header actions
- `ga-page-header__menu-breadcrumbs` - Left slot; contains the hamburger menu button and breadcrumb trail
- `ga-page-header__header-actions` - Right slot; contains the context selector, text actions, and icon buttons
- `ga-button ga-button--secondary ga-button--icon-only` - Used for icon action buttons; used for the hamburger menu in `menu-breadcrumbs` and for icon actions in `header-actions`

### Page Navigation Row

- `ga-page-header__page-navigation` - Secondary bar below the global navigation row
- `ga-page-header__page-nav-start` - Left slot of the page navigation row (e.g., primary action)
- `ga-page-header__page-nav-end` - Right slot of the page navigation row (e.g., secondary/tertiary actions)

## Responsive Behaviour

<table>
  <thead>
    <tr>
      <th>Breakpoint</th>
      <th>Width</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>XS – Mobile</td>
      <td>320–767 px</td>
      <td>Hamburger menu + collapsed breadcrumb; icon-only header actions</td>
    </tr>
    <tr>
      <td>S – Tablet</td>
      <td>768–1439 px</td>
      <td>
        Hamburger menu + collapsed breadcrumb; full header actions (selector,
        text button, icon buttons)
      </td>
    </tr>
    <tr>
      <td>M – Desktop</td>
      <td>1440–1919 px</td>
      <td>
        Hamburger menu + full breadcrumb; all header actions inline;{' '}
        <code>header-actions</code> background transparent
      </td>
    </tr>
    <tr>
      <td>L – Wide</td>
      <td>≥ 1920 px</td>
      <td>Same as Desktop</td>
    </tr>
  </tbody>
</table>

## Examples

### Size L – Wide (≥ 1920 px)

```html
<div style="overflow-x: auto">
  <div class="ga-page-header" style="min-width: 1920px">
    <div class="ga-page-header__global-navigation">
      <div class="ga-page-header__menu-breadcrumbs">
        <button
          type="button"
          class="ga-button ga-button--secondary ga-button--icon-only"
        >
          <!-- icon: menu, size=24, class="ga-icon" -->
        </button>
        <nav class="ga-breadcrumb">
          <div class="ga-breadcrumb-item ga-breadcrumb-item--link">
            <div class="ga-breadcrumb-item__group">
              <a class="ga-breadcrumb-item__trigger" href="#">
                <span class="ga-breadcrumb-item__label">Breadcrumb</span>
              </a>
              <button class="ga-breadcrumb-item__explorer" tabindex="-1">
                <!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
              </button>
            </div>
            <span class="ga-breadcrumb-item__separator">/</span>
          </div>
          <div class="ga-breadcrumb-item ga-breadcrumb-item--link">
            <div class="ga-breadcrumb-item__group">
              <a class="ga-breadcrumb-item__trigger" href="#">
                <span class="ga-breadcrumb-item__label">Breadcrumb</span>
              </a>
              <button class="ga-breadcrumb-item__explorer" tabindex="-1">
                <!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
              </button>
            </div>
            <span class="ga-breadcrumb-item__separator">/</span>
          </div>
          <div class="ga-breadcrumb-item ga-breadcrumb-item--link">
            <div class="ga-breadcrumb-item__group">
              <a class="ga-breadcrumb-item__trigger" href="#">
                <span class="ga-breadcrumb-item__label">Breadcrumb</span>
              </a>
              <button class="ga-breadcrumb-item__explorer" tabindex="-1">
                <!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
              </button>
            </div>
            <span class="ga-breadcrumb-item__separator">/</span>
          </div>
          <div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
            <span class="ga-breadcrumb-item__trigger">Breadcrumb</span>
          </div>
        </nav>
      </div>
      <div class="ga-page-header__header-actions">
        <div class="ga-select" style="min-width: 160px">
          <div class="ga-select__main-area">
            <div class="ga-select__value">Context selector</div>
          </div>
          <div class="ga-select__suffix">
            <!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
          </div>
        </div>
        <button type="button" class="ga-button ga-button--transparent">
          Feedback
        </button>
        <button
          type="button"
          class="ga-button ga-button--secondary ga-button--icon-only"
        >
          <!-- icon: sparkles, size=24, class="ga-icon" -->
        </button>
        <button
          type="button"
          class="ga-button ga-button--secondary ga-button--icon-only"
        >
          <!-- icon: bell, size=24, class="ga-icon" -->
        </button>
      </div>
    </div>
  </div>
</div>
```

### Size M – Desktop (1440–1919 px)

```html
<div style="overflow-x: auto">
  <div class="ga-page-header" style="min-width: 1440px">
    <div class="ga-page-header__global-navigation">
      <div class="ga-page-header__menu-breadcrumbs">
        <button
          type="button"
          class="ga-button ga-button--secondary ga-button--icon-only"
        >
          <!-- icon: menu, size=24, class="ga-icon" -->
        </button>
        <nav class="ga-breadcrumb">
          <div class="ga-breadcrumb-item ga-breadcrumb-item--link">
            <div class="ga-breadcrumb-item__group">
              <a class="ga-breadcrumb-item__trigger" href="#">
                <span class="ga-breadcrumb-item__label">Breadcrumb</span>
              </a>
              <button class="ga-breadcrumb-item__explorer" tabindex="-1">
                <!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
              </button>
            </div>
            <span class="ga-breadcrumb-item__separator">/</span>
          </div>
          <div class="ga-breadcrumb-item ga-breadcrumb-item--link">
            <div class="ga-breadcrumb-item__group">
              <a class="ga-breadcrumb-item__trigger" href="#">
                <span class="ga-breadcrumb-item__label">Breadcrumb</span>
              </a>
              <button class="ga-breadcrumb-item__explorer" tabindex="-1">
                <!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
              </button>
            </div>
            <span class="ga-breadcrumb-item__separator">/</span>
          </div>
          <div class="ga-breadcrumb-item ga-breadcrumb-item--link">
            <div class="ga-breadcrumb-item__group">
              <a class="ga-breadcrumb-item__trigger" href="#">
                <span class="ga-breadcrumb-item__label">Breadcrumb</span>
              </a>
              <button class="ga-breadcrumb-item__explorer" tabindex="-1">
                <!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
              </button>
            </div>
            <span class="ga-breadcrumb-item__separator">/</span>
          </div>
          <div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
            <span class="ga-breadcrumb-item__trigger">Breadcrumb</span>
          </div>
        </nav>
      </div>
      <div class="ga-page-header__header-actions">
        <div class="ga-select" style="min-width: 160px">
          <div class="ga-select__main-area">
            <div class="ga-select__value">Context selector</div>
          </div>
          <div class="ga-select__suffix">
            <!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
          </div>
        </div>
        <button type="button" class="ga-button ga-button--transparent">
          Feedback
        </button>
        <button
          type="button"
          class="ga-button ga-button--secondary ga-button--icon-only"
        >
          <!-- icon: sparkles, size=24, class="ga-icon" -->
        </button>
        <button
          type="button"
          class="ga-button ga-button--secondary ga-button--icon-only"
        >
          <!-- icon: bell, size=24, class="ga-icon" -->
        </button>
      </div>
    </div>
  </div>
</div>
```

### Size S – Tablet (768–1439 px)

```html
<div class="ga-page-header">
  <div class="ga-page-header__global-navigation">
    <div class="ga-page-header__menu-breadcrumbs">
      <button
        type="button"
        class="ga-button ga-button--secondary ga-button--icon-only"
      >
        <!-- icon: menu, size=24, class="ga-icon" -->
      </button>
      <nav class="ga-breadcrumb">
        <div class="ga-breadcrumb-item ga-breadcrumb-item--overflow">
          <button class="ga-breadcrumb-item__trigger" aria-expanded="false">
            <span class="ga-breadcrumb-item__label">...</span>
            <!-- icon: chevron-down, size=16, class="ga-icon" -->
          </button>
          <span class="ga-breadcrumb-item__separator">/</span>
        </div>
        <div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
          <span class="ga-breadcrumb-item__trigger">Breadcrumb</span>
        </div>
      </nav>
    </div>
    <div class="ga-page-header__header-actions">
      <div class="ga-select" style="min-width: 160px">
        <div class="ga-select__main-area">
          <div class="ga-select__value">Context selector</div>
        </div>
        <div class="ga-select__suffix">
          <!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
        </div>
      </div>
      <button type="button" class="ga-button ga-button--transparent">
        Feedback
      </button>
      <button
        type="button"
        class="ga-button ga-button--secondary ga-button--icon-only"
      >
        <!-- icon: sparkles, size=24, class="ga-icon" -->
      </button>
      <button
        type="button"
        class="ga-button ga-button--secondary ga-button--icon-only"
      >
        <!-- icon: bell, size=24, class="ga-icon" -->
      </button>
    </div>
  </div>
</div>
```

### Size XS – Mobile (320–767 px)

```html
<div class="ga-page-header">
  <div class="ga-page-header__global-navigation">
    <div class="ga-page-header__menu-breadcrumbs">
      <button
        type="button"
        class="ga-button ga-button--secondary ga-button--icon-only"
      >
        <!-- icon: menu, size=24, class="ga-icon" -->
      </button>
      <nav class="ga-breadcrumb">
        <div class="ga-breadcrumb-item ga-breadcrumb-item--overflow">
          <button class="ga-breadcrumb-item__trigger" aria-expanded="false">
            <span class="ga-breadcrumb-item__label">...</span>
            <!-- icon: chevron-down, size=16, class="ga-icon" -->
          </button>
          <span class="ga-breadcrumb-item__separator">/</span>
        </div>
        <div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
          <span class="ga-breadcrumb-item__trigger">Breadcrumb</span>
        </div>
      </nav>
    </div>
    <div class="ga-page-header__header-actions">
      <button
        type="button"
        class="ga-button ga-button--secondary ga-button--icon-only"
      >
        <!-- icon: building2, size=24, class="ga-icon" -->
      </button>
      <button
        type="button"
        class="ga-button ga-button--secondary ga-button--icon-only"
      >
        <!-- icon: thumbs-up, size=24, class="ga-icon" -->
      </button>
      <button
        type="button"
        class="ga-button ga-button--secondary ga-button--icon-only"
      >
        <!-- icon: sparkles, size=24, class="ga-icon" -->
      </button>
      <button
        type="button"
        class="ga-button ga-button--secondary ga-button--icon-only"
      >
        <!-- icon: bell, size=24, class="ga-icon" -->
      </button>
    </div>
  </div>
</div>
```