# xpl-top-nav-menu

## Behavior

- **Thin grouping container only.** No item logic lives here — put **`xpl-top-nav-item`** rows in the default slot. This component owns list semantics (**`role="list"`**) and shared panel chrome (width, surface, shadow, radius, padding), nothing else.
- **One authoring markup, two renderings:** the same **`<xpl-top-nav-menu>`** renders as the **desktop flyout** (nested in a parent **`xpl-top-nav-item`**'s **`slot="dropdown"`** — the panel opens absolutely-positioned under the trigger) and, below the **`md`** breakpoint, drives the **mobile cascade**: the parent's dropdown content swaps in **in place** of the top-level nav list (no second panel), with an auto **back row** as the first row.
- **`label`** is the accessible name for the list (**`aria-label`**) and, on mobile, the text shown in the auto-rendered back row (leading **`chevron-left`**) when drilling back out of this group. Tapping the back row calls **`closeMenu()`** on the parent trigger (pop to Level 1) and restores focus to it.
- The back row only renders below **`md`** (synced from a **`matchMedia`** listener) — desktop never sees it, since the flyout there is a single level of links.
- **Cascade lifecycle** (owned by **`xpl-top-nav`**, the shell): pressing **Escape** while drilled in pops the cascade before it closes the mobile drawer (two separate presses); closing the drawer via the hamburger toggle while still drilled in resets the group closed so the drawer reopens at Level 1 next time.

## Usage

```html
<xpl-top-nav-item slot="left-aside" label="Xplor Ops" open-mode="hover">
  <xpl-top-nav-menu slot="dropdown" label="Xplor Ops">
    <xpl-top-nav-item label="Payroll" href="/payroll"></xpl-top-nav-item>
    <xpl-top-nav-item label="Capital" href="/capital">
      <xpl-icon slot="trailing-icon" icon="open-rect-arrow-out"></xpl-icon>
    </xpl-top-nav-item>
  </xpl-top-nav-menu>
</xpl-top-nav-item>
```

## Host modifier classes (BEM)

None on the host itself. Row-level state (`active`, `selected`, description, icons) lives entirely on the slotted `xpl-top-nav-item` rows.

| Class | Source |
| --- | --- |
| `.xpl-top-nav-menu__back` | Auto-rendered on the back-row `xpl-top-nav-item` (mobile only, `label` set). Not a hook to restyle — it uses the same row treatment as any other `xpl-top-nav-item` in this list. |

## Slots

| Slot | Description |
| --- | --- |
| (default) | `xpl-top-nav-item` rows. |

<!-- Auto Generated Below -->


## Overview

Thin grouping container for **`xpl-top-nav-item`** rows — the panel content for a desktop flyout
(**`slot="dropdown"`** on the parent **`xpl-top-nav-item`**) and, on small screens, the **mobile
cascade**: the same markup drills in to a **Level 2** view in place, with an auto-rendered **back
row** (leading **`chevron-left`** + this component's **`label`**) as the first row. Tapping the back
row closes the parent trigger's dropdown (**`closeMenu()`**), returning to **Level 1** and restoring
focus to the parent trigger. No item logic otherwise lives here — row behavior (icons, description,
links, nested dropdowns) is entirely **`xpl-top-nav-item`**.

**One authoring markup, two renderings:** consumers write this once; **`isMobileCascade`** (synced
from **`TOP_NAV_MOBILE_MQ`**) decides whether the back row renders. Desktop never sees it — the
flyout is a single level of links (see `xpl-top-nav-item`'s cascade-depth notes).

**Panel chrome** is shared with **`xpl-nav-header-menu`** (the account menu): width
(**`--xpl-top-nav-panel-width`**), surface, shadow, radius, and vertical padding all come from the
same selector in `top-nav.css` so the desktop flyout, mobile cascade, and account menu read as one
visual family.

**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 (consistent with the rest of the
**`xpl-top-nav`** family).

## Properties

| Property | Attribute | Description                                                                                                                                          | Type     | Default     |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
| `label`  | `label`   | Accessible name for the list (**`aria-label`** on the host) and the label shown in the mobile cascade back row when drilling back out of this group. | `string` | `undefined` |


## Slots

| Slot          | Description                  |
| ------------- | ---------------------------- |
| `"(default)"` | **`xpl-top-nav-item`** rows. |


## Dependencies

### Depends on

- [xpl-top-nav-item](../xpl-top-nav-item)
- [xpl-icon](../../xpl-icon)

### Graph
```mermaid
graph TD;
  xpl-top-nav-menu --> xpl-top-nav-item
  xpl-top-nav-menu --> xpl-icon
  xpl-top-nav-item --> xpl-icon
  style xpl-top-nav-menu fill:#f9f,stroke:#333,stroke-width:4px
```

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

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