TuxPortalShell & TuxPortalHeader

TuxPortalHeader (Two-Tier Header)

Tier 1 is a maroon bar with agency branding, institutional links, and search affordance. Tier 2 provides the crisp white brand ribbon, portal title, multi-tier navigation dropdowns, and action buttons.

Texas A&M Transportation Institute

Connected Corridors InitiativeLab Portal

<TuxPortalHeader
  portal-title="Connected Corridors Initiative"
  portal-badge="Lab Portal"
  portal-badge-variant="gold"
  :nav-items="navItems"
  action-text="Launch Portal"
  @search-click="onSearch"
  @action-click="onAction"
/>

TuxPortalShell (Turnkey Layout Container)

TuxPortalShell wraps header, sticky positioning, breadcrumbs subnav with signature 2px Warm Gold accent rule, full-bleed hero slot, responsive main container, floating feedback pill, and institutional footer.

Texas A&M Transportation Institute

Connected Corridors Initiativev3.0

Connected Research Testbed

This is a realistic page viewport inside TuxPortalShell. Notice the floating feedback pill pinned at the bottom right, the Warm Gold breadcrumbs divider, and the institutional legal footer at the bottom.

1,420

Active V2X Detectors

99.8%

Telemetry Uptime

12

Texas DOT Districts

<TuxPortalShell
  portal-title="Connected Corridors Initiative"
  portal-badge="Live Telemetry"
  :nav-items="navItems"
  :breadcrumbs="breadcrumbs"
  action-text="Access Data"
  @search-click="onSearch"
  @action-click="onAction"
  @feedback-click="onFeedback"
>
  <template #hero>
    <div class="bg-brand-primary text-white py-12 px-6">
      <h1 class="text-3xl font-bold">Research Portal Hero</h1>
    </div>
  </template>

  <div class="space-y-6">
    <TuxSectionHeader variant="institutional">Corridor Status</TuxSectionHeader>
    <p>Main content area adhering to standard or wide container rules.</p>
  </div>
</TuxPortalShell>

Architecture & Brand Parity

Visual Alignment with Comm

Maroon Utility Bar: Standardized with var(--brand-primary) and high-contrast links.
Warm Gold Underline: 2px var(--brand-accent) rule on active navigation items and breadcrumbs strip.
Sharp Button Profile: 0px border radius matching the standard controls on tti.tamu.edu.
Sub-Brand Lockup: Hairline divider allowing any division, research lab, or tool to sit beside the official TTI logo.

Developer Experience

Zero Boilerplate: Single component gives any app institutional compliance in one line.
Deep Slots: Full customization via #brand, #nav, #hero, #subnav, and #feedback.
Responsive Mobile Drawer: Complete slideover menu with accordion sub-sections and utility links.
Accessibility: Full ARIA landmarks, keyboard esc dismissal, and focus ring compliance.