{
  "tag": "ed-header",
  "kind": "component",
  "summary": "Headers provide a consistent app bar with a logo area and a content area for navigation, search, or actions.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/header/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/header/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [],
  "use": [
    "The single persistent top bar of an application, holding branding, application-wide navigation, and global actions",
    "A logo that leads back to the start page and global actions such as help, profile or notifications, reachable on every screen",
    "A product-wide search field or user menu that must stay visible while the user scrolls through a long list",
    "Switching the client or company a tax advisor is working in, from the top of every screen"
  ],
  "notFor": [
    {
      "when": "The product's primary section navigation that belongs down the side",
      "instead": "[Side Menu](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/side-menu)"
    },
    {
      "when": "A page-location trail across the top of the header",
      "instead": "[Breadcrumb](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/breadcrumb)"
    }
  ],
  "rules": [
    {
      "id": "header/labeled-global-actions",
      "rule": "In eurodata products, give every global action in the header a visible text label — icon-only buttons are not acceptable. The two exceptions are the hamburger toggle for the side navigation (the default `ed-app` provides) and the help button with the `help_circle` icon: both icons are universally established.",
      "why": "Our usability studies repeatedly show that users, especially less experienced ones, do not reliably recognize or trust unlabeled icons, and features hidden behind them go unused for years.",
      "check": "error"
    },
    {
      "id": "header/sticky",
      "rule": "Keep the header in place, so branding and global actions stay reachable at every scroll position. Inside [App](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/app) this is already handled; standalone it takes `position: sticky` on the header, in a parent that spans the scrollable content.",
      "check": "error"
    },
    {
      "id": "header/logo-links-home",
      "rule": "Make the branding logo a link back to the application's home or start screen.",
      "check": "error"
    },
    {
      "id": "header/logo-trailing",
      "rule": "Leave the logo at the trailing edge, where the component puts it — never move it with CSS.",
      "why": "That is the eurodata convention, and moving it with CSS separates what users see from the order they tab through.",
      "check": "error"
    },
    {
      "id": "header/logo-size",
      "rule": "Don't force a fixed size on the branding image — the header sizes it to the bar automatically.",
      "check": "error"
    },
    {
      "id": "header/two-groups",
      "rule": "Start navigation at the leading (left) edge of the content area and group global and account actions at its trailing edge, so the two roles read as two groups rather than one long row.",
      "check": "warning"
    },
    {
      "id": "header/overflow",
      "rule": "Keep frequently used global actions directly visible while the bar has room, never hidden in a \"More\" or overflow menu. When the width shrinks, move only lower-priority actions into a clearly labeled overflow, keeping the most important ones visible longest, and never let the bar clip or silently drop actions. This does not apply to the user menu: grouping account-level items such as settings, logout, or the theme switch behind it is a valid, established pattern.",
      "check": "error"
    },
    {
      "id": "header/consistent-order",
      "rule": "Keep the same actions in the same order across screens — never reorder global actions from one screen to the next.",
      "why": "Users build spatial memory."
    },
    {
      "id": "header/module-switcher",
      "rule": "Place a product or module switcher in the header, so users can move between modules from any screen in one or two steps — never bury module or product switching inside a settings menu."
    },
    {
      "id": "header/navigation-toggle",
      "rule": "Host the control that collapses and expands the side navigation in the header, keeping the side navigation expanded by default in the desktop view — the app starts it collapsed, so set `desktop-nav-open` ([`app/desktop-nav-open`](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/app/usage#rule-app-desktop-nav-open)).",
      "check": "error"
    },
    {
      "id": "header/no-page-actions",
      "rule": "Never overload the header with page-level or record-level actions — they belong to the page body."
    },
    {
      "id": "header/banner-landmark",
      "rule": "Set `role` yourself when the header sits inside an article or a section — never leave the default `banner` landmark in place on a header that is not the page's own.",
      "why": "One page carries one banner, and a second one fails an automated accessibility check.",
      "check": "error"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [],
    "events": [],
    "slots": [
      {
        "name": "",
        "description": "The header's content (navigation, search, actions, etc.). Visually leading; use `margin-inline-start: auto` on a child to push it (and everything after it) to the right of the content row."
      },
      {
        "name": "logo",
        "description": "The branding logo, at the trailing edge. Images and inline SVGs are sized to fit the header height automatically, including when wrapped in a link. The region collapses when the slot is empty."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-header-size",
        "default": "var(--ed-size-13)",
        "description": "The height of the header. An `ed-button[navbar]` inside the header reads it as its own minimum width, so those buttons stay square when this changes. Set it on a common ancestor (or the theme) rather than on the header alone to also reach `ed-app`'s navigation toggle, which is a sibling of the header rather than a child of it."
      }
    ],
    "parts": [
      {
        "name": "content",
        "description": "The wrapper around the default slot."
      },
      {
        "name": "logo",
        "description": "The wrapper around the `logo` slot."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/header/header.js';",
  "react": {
    "component": "EdHeader",
    "import": "import EdHeader from '@eurodata/eurodata-ui/dist/react/header/index.js';"
  }
}