# xpl-nav-header-menu

Profile block (username, email) and a default slot for menu rows. Typically inside **`xpl-popover`** or **`xpl-dropdown`** under a user trigger.

**Styles** for this component live in **`packages/apollo-core/src/css/top-nav.css`** (with **`xpl-top-nav-item`** rules in the same file).

## Usage

```html
<xpl-nav-header-menu username="Katie Wilson" email="katie@example.com">
  <xpl-top-nav-item label="View account" icon="house-4" href="/account"></xpl-top-nav-item>
  <xpl-top-nav-item label="Log out" icon="open-rect-arrow-out" href="/logout"></xpl-top-nav-item>
</xpl-nav-header-menu>
```

Optional narrow-only duplicate of bar actions (e.g. Inbox) between the profile block and the list — use **`slot="right-aside-mobile"`** with **`xpl-top-nav-item`** or **`xpl-button`**. That strip is visible by default only on **narrow viewports** (one pixel below Tailwind **`md`** — see **`top-nav.css`**).

```html
<xpl-nav-header-menu username="Katie Wilson" email="katie@example.com">
  <xpl-top-nav-item slot="right-aside-mobile" label="Inbox" icon="mail-1" href="/inbox"></xpl-top-nav-item>
  <xpl-top-nav-item label="Log out" icon="open-rect-arrow-out" href="/logout"></xpl-top-nav-item>
</xpl-nav-header-menu>
```

## Token Use

Spacing, typography, and colors use Apollo Foundation **`var(--xpl-*)`** tokens (e.g. **`--xpl-text-strong`**, **`--xpl-space-*`**, **`--xpl-font-size-*`**). Panel width uses the component-scoped custom property **`--xpl-top-nav-panel-width`** on **`xpl-top-nav`** / **`xpl-nav-header-menu`** hosts (composed from **`--xpl-size-*`** in **`top-nav.css`**).

## Accessibility

- The default slot is wrapped in a container with **`role="list"`**. Use **`xpl-top-nav-item`** for rows so each item exposes **`role="listitem"`** and keyboard/focus behavior from **`xpl-top-nav-item`** (including **`Enter`** / **`Space`** on non-link controls and **`:focus-visible`** outline on the inner control).
- The host may include Foundation’s **`dark`** class so purpose tokens match account menu contrast when the page root is light.
- **`slot="right-aside-mobile"`** is not a list; do not rely on **`role="list"`** for that block.

## Events

This component does not emit custom events. Use **`xpl-top-nav-item`** **`navItemClick`** (or native link navigation) for row actions.

<!-- Auto Generated Below -->


## Overview

Profile / account block (username, email, default slot for **`xpl-top-nav-item`** / **`xpl-divider`**).
Tag **`xpl-nav-header-menu`**; implementation folder **`xpl-nav-header-menu`**. **`.xpl-nav-header-menu__slot`** is
**`role="list"`** for slotted **`xpl-top-nav-item`** (**`role="listitem"`**).

**Slotted content:** do not add **`xpl-nav-header-menu__*`** BEM classes on nodes you pass into the default slot —
profile, list shell, and **`xpl-top-nav-item`** **`role="listitem"`** are handled by the component. Use
**`xpl-top-nav-item`** (or plain elements that are not Apollo **`xpl-*`** BEM hooks) in the slot only.

**`slot="right-aside-mobile"`** — optional block **between** the profile header and the default-slot list (e.g. narrow-only
duplicate of **every** **`slot="right-aside"`** control per Figma when **`xpl-top-nav`** hides **`right-aside`** on narrow viewports (always)).
Not **`role="list"`**; use **`xpl-button`** / **`xpl-top-nav-item`** as needed. Shown only on **narrow viewports** (one pixel below Tailwind **`md`** — **`top-nav.css`**) so bar actions stay in **`slot="right-aside"`** on wider viewports.
Light-DOM **`slotchange`** is unreliable; a host **`MutationObserver`** (child / subtree / **`slot`** attribute) keeps
**`xpl-nav-header-menu--has-right-aside-mobile`** in sync when nodes are added or retargeted after mount (same pattern as **`xpl-top-nav`**).
Stencil **`newSpecPage`** / mock-doc does not define **`MutationObserver`**; slot presence still updates on the next
deferred flush (**`setTimeout(0)`** coalesced with **`componentDidRender`**). In real browsers the observer handles child /
**`slot`** mutations without stacking uncancellable microtasks.

**Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens resolve to dark-mode
values even when the page root is light (same contract as **`xpl-top-nav`** / **`xpl-top-nav-item`**).

## Properties

| Property   | Attribute  | Description                              | Type     | Default     |
| ---------- | ---------- | ---------------------------------------- | -------- | ----------- |
| `email`    | `email`    | Email address shown below the username.  | `string` | `undefined` |
| `username` | `username` | Display name shown in the profile block. | `string` | `undefined` |


## Slots

| Slot                   | Description                                                                                                                                                                   |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `"right-aside-mobile"` | Optional actions **below** **`username`** / **`email`** and **above** the default-slot list (e.g. mobile Inbox). Hidden on wide viewports by default (see **`top-nav.css`**). |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*