Header

Summary

The application header. Three slots wrap inside a single inner container: before (typically an app-switcher), primary (logo + global nav), and secondary (search, help + user menu). Optional responsive behavior collapses overflow nav items into a "More" menu when the viewport is too narrow.

When to use

Slot	Use it for
Before `.neura-header-before`	Pre-logo content. Conventionally an app-switcher dropdown.
Primary `.neura-header-primary`	Logo + global navigation links. Dropdowns inside use `.neura-dropdown2-in-header`.
Secondary `.neura-header-secondary`	Right-aligned account / help menus, search.
Responsive `data-neura-responsive`	Opt into the overflow-into-More-menu behavior. Best when the primary nav has 6+ items.

Examples

Live neura-header with all three slots active: the app-switcher on the left, primary nav and Get Started dropdown in the middle, quicksearch, help, and user menus on the right.

HTML

Minimum header (logo + primary nav):

<header id="header" role="banner">
  <nav class="neura-header" role="navigation">
    <div class="neura-header-inner">
      <div class="neura-header-primary">
        <h1 id="logo" class="neura-header-logo">
          <a href="/">
            <span class="neura-header-logo-text">APP</span>
          </a>
        </h1>
        <ul class="neura-nav">
          <li><a href="#" class="active">Dashboard</a></li>
          <li><a href="#">Reports</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

App-switcher in the before slot, a dropdown trigger with a left-aligned tail menu:

<div class="neura-header-before">
  <ul class="neura-nav">
    <li>
      <a class="neura-dropdown2-trigger"
         id="appswitcher"
         aria-controls="appswitcher-content"
         aria-haspopup="true">
        <span class="neura-icon neura-icon-small neura-icon-apps">Linked Applications</span>
      </a>
    </li>
  </ul>
  <div id="appswitcher-content"
       class="neura-dropdown2 neura-style-default neura-dropdown2-in-header"
       data-dropdown2-alignment="left"
       aria-hidden="true">
    <div class="neura-dropdown2-section">
      <ul class="neura-list-truncate">
        <li><a href="/jira">JIRA</a></li>
        <li><a href="/confluence">Confluence</a></li>
        <li><a href="/gitlab">GitLab</a></li>
      </ul>
    </div>
  </div>
</div>

The secondary slot - quicksearch as a nav item (that's what centers it in the bar, see Quicksearch), then the user menu as an avatar trigger with a right-aligned menu:

<div class="neura-header-secondary">
  <ul class="neura-nav">
    <li>
      <form class="neura-quicksearch" role="search">
        <input type="search" placeholder="Search" aria-label="Search">
      </form>
    </li>
    <li>
      <a class="neura-dropdown2-trigger"
         id="user-menu-trigger"
         aria-controls="user-menu"
         aria-haspopup="true">
        <span class="neura-avatar neura-avatar-xsmall">
          <img src="/avatar.jpg" alt="">
        </span>
        Tomas
      </a>
    </li>
  </ul>
  <div id="user-menu"
       class="neura-dropdown2 neura-style-default neura-dropdown2-in-header"
       aria-hidden="true">
    <ul>
      <li><a href="/profile">Profile</a></li>
      <li><a href="/settings">Settings</a></li>
      <li><a href="/logout">Sign out</a></li>
    </ul>
  </div>
</div>

Responsive behavior - overflow nav items collapse into a "More" menu on narrow viewports:

<nav class="neura-header" role="navigation" data-neura-responsive>
  <!-- inner contents... -->
</nav>

CSS classes

Class	Effect
`.neura-header`	The `<nav>` wrapper.
`.neura-header-inner`	Inner flex container that lays out the three slots.
`.neura-header-before`	Pre-logo slot.
`.neura-header-primary`	Logo + main nav.
`.neura-header-secondary`	Right-aligned account / help slot.
`.neura-header-logo`	Logo wrapper (use on `<h1>`).
`.neura-header-logo-device`	Optional icon span before the text.
`.neura-header-logo-text`	The logo text label.
`.neura-nav`	Reset list styling for nav items.
`.neura-dropdown2-in-header`	Tweak applied to dropdown menus anchored from header items.

Attributes

Attribute	Effect
`data-neura-responsive`	Opts into the overflow-into-More behavior.
`data-dropdown2-alignment`	On a header dropdown: `"left"` or `"right"`.
`.active`	On a primary nav link: current page.

JavaScript

Most of the header is CSS: the only piece with JS is the responsive overflow behavior, which is auto-bound on DOMContentLoaded for any .neura-header[data-neura-responsive] (or the aliased .aui-header[data-aui-responsive]).

The controller appends a "More" item (class neura-header-more) to the primary nav and a standard dropdown2 overflow menu to <body>; nav items that don't fit move into that menu and return to the bar when space allows again.

API

Member	Description
`Neura.responsiveHeader(elOrSelector)`	Get / create the responsive controller for a header element. The element must carry the `neura-header` class.
`.refresh()`	Recalculate which nav items overflow into the "More" menu. Runs automatically on viewport resize (ResizeObserver).
`.destroy()`	Tear down listeners and undo the overflow markup.

Manual setup (e.g. for a header rendered after page load; auto-init only scans once on DOMContentLoaded):

const rh = Neura.responsiveHeader('#header nav.neura-header');

// Recalculate after adding or removing nav items (viewport resizes
// are picked up automatically):
rh.refresh();

AUI compatibility

Every aui-header* structural class and the data-aui-responsive attribute alias onto the Neura rules (the shim also auto-inits .aui-header[data-aui-responsive]), so legacy AUI-era header markup ports unchanged: the Nsys portal runs exactly that markup through the shim. New markup should use the neura-* names shown above.