Header Nav No Bootstrap

Rules (current pattern)

Source of truth for backend / CMS. Utilities live on the DOM. Scoped <style> is state + positioning only (no Popover API, no Bootstrap JS). Breakpoint family: md = 768px (:md utilities / min-width: 768px).

Tab map (DOM order)

Home — A plain link (current / active)
Clinical Topics — C 2-column (6 children; rule: > 5 → C)
Education — B 1-column (3)
Submit Science — B 1-column (3); label uses flex_60 (long title exception)
Guidelines — A plain link
Membership — B 1-column (3)
Register Now — D CTA (always last; highlight button)

0. Shell (once per page)

Wrapper: flex flex_row:md c_white relative isolation_isolate z_3
<nav id="header_nav-arches" class="flex_auto p_0 bg_acc font_2 font_1:md relative" aria-label="Main navigation">
Menu row (mobile only): #header_nav_toggle_row → nav-toggle-row relative display_none:md + .navbar-toggler-arches button (aria-controls="header_nav_content")
Tab list host: #header_nav_content → navbar-collapse-arches bg_acc p-x_3:md max-w_90 display_none flex:md w_100 max-h_100 overflow_auto scroll-bar-mini
List: ul.navbar-nav-arches → b_0 flex flex_column flex_row:md m_0 p_0 ul_none text_center:md text_left w_100 font_accent

IDs & hooks (every tab)

Tab: id="nav_tab_{slug}" on every top-level <li>
Dropdown only — toggle: id="nav_toggle_{slug}"; panel: id="nav_menu_{slug}"; label: id="nav_link_{slug}"
Wire a11y: toggle aria-controls / aria-expanded / aria-haspopup="true"; panel aria-labelledby → toggle id
Behavior classes: .nav-has-submenu, .nav-tab-trigger, .nav-submenu-toggle, .nav-submenu-label-arches, .nav-submenu-panel, .dropdown-menu-arches
State classes (JS / CSS): .is-menu-open on #header_nav-arches; .is-open on dropdown <li>

Backend decision

Title contains REGISTER NOW → D (pull out of order; render last)
No children / !SubPagesExist → A
1–5 children → B
> 5 children → C (B + 2-col additives)

D. Register CTA (always last)

Detect: Navigation_Title contains REGISTER NOW (case-insensitive)
Order: remove from normal tab loop; append after all A/B/C tabs
<li id="nav_tab_*" class="flex flex_column flex_none m-l_auto:md m-r_n3:md m_0 p_0 relative">
Trigger: <div class="flex flex_column flex_grow grid m-y_n3:md nav-tab-trigger w_100"> — no toggle / no submenu
Link: class="bg_highlight-n1 block br_radius c_white font_0:md font_1:lg font_medium font_xbold grid h:bg_highlight-n4 items_center p-x_4 p-x_5:lg p-y_3 text_center:md text_right uppercase"
Visibility: hide when authenticated + full registration role; otherwise show
Label: authenticated + virtual role → Upgrade Now; else use Navigation_Title

A. Plain link (no children)

<li id="nav_tab_*" class="relative flex_auto m_0 p_0 flex flex_column"> — no nav-has-submenu, no toggle, no panel
Trigger: <div class="nav-tab-trigger flex flex_row-reverse items_center flex_auto w_100">
Label only: <a class="nav-link-arches flex_70 flex_auto nav-submenu-label-arches nowrap p-x_3 p-y_3 a:bg_accent-n3 h:bg_accent-n1 c_white not-link block h:undecorated">
Current page: active on .nav-tab-trigger + aria-current="page" on the link

B. Dropdown — 1 column (1–5 children)

<li id="nav_tab_*" class="relative flex_auto nav-has-submenu m_0 p_0 flex flex_column">
Trigger: <div class="nav-tab-trigger flex flex_row-reverse items_center flex_auto w_100"> — flex_row-reverse so toggle (first in DOM) sits on the right on mobile
Toggle (first child of trigger): class="bg_transparent br_none h:bg_acc-n3 c_white block display_none:md block:touch flex_none grid items_center justify_center nav-link-arches nav-submenu-toggle not-link nowrap p-x_3 p-y_3 self_stretch text_center cursor_pointer" — hidden at md; tap toggles .is-open on the li
Toggle icon: <i class="far fa icon-toggle_plus-minus" aria-hidden="true"> + visually-hidden label
Label: class="nav-link-arches flex_70 flex_auto nav-submenu-label-arches nowrap p-x_3 p-y_3 a:bg_accent-n3 h:bg_accent-n1 c_white not-link block h:undecorated text_left:touch" — exception: long titles may use flex_60 instead of flex_70 (see Submit Science)
Panel = sibling of trigger (not nested inside it): class="nav-submenu-panel dropdown-menu-arches m-b_3 bg_white font_0 m-x_3 m-x_0:md shadow_overlap-light br_black-1 br_solid br_1 br-bl_round br-br_round font_copy br-t_0 br_none br_solid:md z_5"
Inner grid: grid columns_1 p-t_2 p-b_3 p-x_2 p-x_3:md
One .dropdown_column → child ul (see child link recipe)

C. Dropdown — 2 columns (> 5 children) — additives on B

Why: longer lists need a wider desktop panel and a visual split
Panel adds w_auto:md
Inner grid: grid columns_1 columns_2:md p-x_2 p-t_2 p-b_3 p-x_3:md gap-x_3
Split children into two .dropdown_column blocks (roughly half / half)
2nd column only: add br-l_1 br_solid:md br_none br_black-2 p-l_3:md

Child link (inside every `.dropdown_column`)

List: ul.ul_none lh_2 m_0 flex flex_column gap_1 c_black text_left font_ui
Link: <a class="h:bg_accent-4 a:bg_accent-3 block p-y_3 p-x_4:md p-x_3 br_radius not-link c_inherit-all wrap sub-menu-item-arches h:undecorated" href="…"> <span class="text-indent_n1 block m-l_4">Label</span>

Behavior (JS + CSS)

Mobile Menu: .navbar-toggler-arches toggles .is-menu-open on #header_nav-arches + aria-expanded. CSS shows #header_nav_content as an absolute overlay under the Menu row (bar height stays put).
Submenus mobile (< md): panels stay in document flow inside the open Menu list — open tab pushes following tabs.
Submenus desktop (≥ md): CSS anchor from .nav-tab-trigger + position-try-fallbacks (align-end / drop-up / flip). Fallback: position: absolute; top: 100%.
Open (fine pointer): @media (hover: hover) and (pointer: fine) → :hover / :focus-within on .nav-has-submenu.
Open (tap): .nav-submenu-toggle toggles .is-open on its tab; closes sibling open tabs (accordion).
Do not use Popover API / commandfor / interestfor for these panels — top layer fights in-flow mobile accordion.

Scoped `<style>` — keep only

Toggle appearance / font: inherit
Panel closed by default; show on .is-open / fine-pointer hover
Icon ::before swaps (bars ↔ times, plus ↔ minus)
Mobile Menu overlay positioning + scroll on #header_nav_content
Desktop anchor-name / position-anchor / position-try-fallbacks

Utilities on DOM (not in `<style>`)

relative on nav / tabs; display_none:md on Menu row; display_none flex:md on content
Panel gutters: m-x_3 m-x_0:md (no CSS !important margin)
Toggle chrome: bg_transparent br_none cursor_pointer
Color, type, flex, borders, shadows — Arches utilities on markup

Header navigation (no Bootstrap)