{
  "tag": "ed-rail-menu",
  "kind": "component",
  "summary": "A two-pane navigation: a slim [ed-side-menu](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/side-menu)\nrail selects a section, a second side-menu panel shows the section's pages. Three-stage responsive behavior.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/rail-menu/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/rail-menu/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon",
    "ed-side-menu",
    "ed-side-menu-item"
  ],
  "use": [
    "Product-wide navigation with 4–8 top-level sections, each containing many pages",
    "A navigation that gives the page more room on a small window by showing only the bar until a section is opened"
  ],
  "notFor": [
    {
      "when": "3 or fewer top-level sections",
      "instead": "[Side Menu](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/side-menu) with its built-in super-tabs"
    },
    {
      "when": "A fully expanded, always-visible sidebar that shows every item and its sub-groups at once",
      "instead": "[Side Menu](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/side-menu)"
    },
    {
      "when": "Horizontal navigation across the top of the page, branding, or global actions",
      "instead": "[Header](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/header)"
    }
  ],
  "rules": [
    {
      "id": "rail-menu/only-when-called-for",
      "rule": "Reach for it only when the UX team explicitly calls for it, or when the product needs more than 3 sections — the default for section navigation is a [Side Menu](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/side-menu) with its built-in super-tabs."
    },
    {
      "id": "rail-menu/at-most-eight-sections",
      "rule": "Never crowd the rail with more than eight top-level sections — reconsider the information architecture instead of squeezing more in.",
      "check": "error",
      "covered": true
    },
    {
      "id": "rail-menu/visible-labels",
      "rule": "Icon-first is not icon-only: keep a visible text label under every rail icon, and give each rail item both an icon and a label on this first level. Never reduce the rail to icons alone, and never hide the labels inside tooltips.",
      "why": "Company research shows icon-only controls are repeatedly overlooked, avoided, or misread — a feature whose control is not self-descriptive goes unused.",
      "check": "error"
    },
    {
      "id": "rail-menu/active-indicator",
      "rule": "Keep the active section unmistakable through color and a geometric cue, never color alone: keep the built-in active indicator intact, which marks the section with both, and never restyle it down to color alone.",
      "check": "warning"
    },
    {
      "id": "rail-menu/landing-page",
      "rule": "Give every section a landing or overview page as its first page — never leave a section without one.",
      "why": "Opening a section jumps straight to its first page; without a landing page, opening it will appear to do nothing."
    },
    {
      "id": "rail-menu/fixed",
      "rule": "Keep the rail fixed and permanently visible while the page content scrolls.",
      "check": "error"
    },
    {
      "id": "rail-menu/scroll-position",
      "rule": "Preserve the panel's scroll position across page loads in a multi-page application (e.g. with turbo.js or a manual restore), so the active page is still in view after every navigation — never let a full page load snap a long page list back to the top.",
      "why": "Losing the scroll position disorients exactly the users the rail is meant to orient."
    },
    {
      "id": "rail-menu/click-not-hover",
      "rule": "Make every section and page reachable by a direct click or tap — never only by hovering. Treat hover previews as an accelerator only, never the sole way in.",
      "check": "warning"
    },
    {
      "id": "rail-menu/no-hidden-items",
      "rule": "Never hide sections or pages behind a \"more\" or expand button — a scrollable list is always preferable to hidden items."
    },
    {
      "id": "rail-menu/back-step",
      "rule": "Don't add a back step of your own on mobile — the component brings one, so users can always return from a section's pages to the section list.",
      "check": "error"
    },
    {
      "id": "rail-menu/shallow",
      "rule": "Keep navigation shallow: two levels (sections then pages), three at the very most.",
      "check": "error"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "panel",
        "type": "string",
        "description": "Contract attribute on slotted rail `ed-side-menu-item`s: names the panel this rail item opens. Mutually exclusive with `href` — a rail item takes one or the other, never both; with both set, `panel` wins and the `href` is never followed (a `logger.warn` flags the mistake once per item)."
      },
      {
        "name": "name",
        "type": "string",
        "description": "Contract attribute on slotted panel elements: the panel's identifier referenced by `panel`."
      },
      {
        "name": "current",
        "property": "current",
        "type": "string",
        "default": "''",
        "description": "The identity (item `value`, falling back to `href`) of the current page. Drives the active section and is forwarded to `ed-side-menu` panels."
      },
      {
        "name": "panel-open",
        "property": "panelOpen",
        "type": "boolean",
        "default": "true",
        "description": "Whether the panel is open. Reflects silently — setting the property emits no events;\nuse `showPanel()`/`hidePanel()`/`togglePanel()` to get `ed-show`/`ed-hide`.\nIgnored on the compact view."
      },
      {
        "name": "compact-breakpoint",
        "property": "compactBreakpoint",
        "type": "string",
        "default": "'768px'",
        "description": "Below this viewport width the compact (drilldown) view renders. Keep in sync with `ed-app`'s `mobile-breakpoint`."
      },
      {
        "name": "medium-breakpoint",
        "property": "mediumBreakpoint",
        "type": "string",
        "default": "'1600px'",
        "description": "Between the compact and this viewport width, the rail persists and the panel overlays."
      },
      {
        "name": "view",
        "property": "view",
        "type": "'expanded' | 'medium' | 'compact'",
        "default": "'expanded'",
        "description": "The current responsive stage. Computed from the viewport; reflected for styling."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [
      {
        "name": "activeSection",
        "type": "string",
        "description": "The `name` of the currently shown panel ('' while the active rail item has no panel)."
      }
    ],
    "methods": [
      {
        "name": "showPanel",
        "description": "Opens the panel and emits ed-show / ed-after-show. No-op when already open."
      },
      {
        "name": "hidePanel",
        "description": "Closes the panel and emits ed-hide / ed-after-hide. No-op when already closed.\nIntentionally does NOT clear a pending hover timer — the timer's overlayActive recheck\nmakes it a safe no-op; reopening cancels it via updated()."
      },
      {
        "name": "setCurrent",
        "parameters": [
          {
            "name": "value",
            "type": "string"
          }
        ],
        "description": "Update `current` and synchronously re-resolve the active section (SPA route hooks)."
      }
    ],
    "events": [
      {
        "name": "ed-show",
        "react": "onEdShow",
        "description": "Emitted when the panel opens via user/API action (never from initialization or automatic stage changes). Cancelable; calling `preventDefault()` keeps it closed."
      },
      {
        "name": "ed-hide",
        "react": "onEdHide",
        "description": "Emitted when the panel closes via user/API action. Cancelable; calling `preventDefault()` keeps it open."
      },
      {
        "name": "ed-after-show",
        "react": "onEdAfterShow",
        "description": "Emitted after the panel's opening transition finishes."
      },
      {
        "name": "ed-after-hide",
        "react": "onEdAfterHide",
        "description": "Emitted after the panel's closing transition finishes."
      },
      {
        "name": "ed-section-change",
        "react": "onEdSectionChange",
        "type": "{ panel: string }",
        "description": "Emitted when the active section changes (never from the initial resolution). Detail contains `{ panel: string }`; `panel` is `''` when the panel area collapses, e.g. after clicking a pure-navigation rail item."
      }
    ],
    "slots": [
      {
        "name": "rail",
        "description": "Exactly one `ed-side-menu variant=\"slim\"` whose items may carry `panel=\"…\"` references."
      },
      {
        "name": "rail-header",
        "description": "Optional content pinned above the rail slot, inside the rail column."
      },
      {
        "name": "rail-footer",
        "description": "Optional content pinned below the rail column on expanded/medium, and below the panel on compact."
      },
      {
        "name": "",
        "description": "The panels: one element per section, each identified by a `name` attribute. Any element works; `ed-side-menu` panels additionally receive the wrapper's `current`."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-rail-menu-rail-width",
        "default": "6rem",
        "description": "Width of the rail column (mirrors the slim side-menu width)."
      },
      {
        "name": "--ed-rail-menu-panel-width",
        "default": "15rem",
        "description": "Width of the open panel on expanded/medium views."
      }
    ],
    "parts": [
      {
        "name": "base",
        "description": "The component's base wrapper."
      },
      {
        "name": "rail",
        "description": "The rail column wrapping the rail slot."
      },
      {
        "name": "rail-header",
        "description": "The wrapper around the rail-header slot."
      },
      {
        "name": "rail-footer",
        "description": "The wrapper around the rail-footer slot."
      },
      {
        "name": "panel",
        "description": "The container around the panel slot."
      },
      {
        "name": "back-button",
        "description": "The compact drilldown's back-to-level-1 button. Visible only on compact."
      }
    ],
    "states": [
      {
        "name": "panel-empty",
        "description": "Applied while the active section has no panel (rail item without `panel`)."
      },
      {
        "name": "drilldown",
        "description": "Applied on the compact view while level 2 (the active section's panel) is showing."
      }
    ]
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/rail-menu/rail-menu.js';",
  "react": {
    "component": "EdRailMenu",
    "import": "import EdRailMenu from '@eurodata/eurodata-ui/dist/react/rail-menu/index.js';"
  }
}