Navigation

Top navigation

The top nav is the global anchor - where the brand sits, where the user signs in/out, where the product switcher lives. Applies to:

• FDT corporate marketing site (frontierdefensetech.com)
• Product landing pages (grdwt.ch, individual product sites)
• In-product primary nav on desktop

Anatomy

• Height: 56px (desktop), 48px (mobile)
• Background: navy-800 with a navy-600 1px bottom border
• Left: FDT logo or product wordmark (Barlow Condensed 700, UC tracked) - always clickable, returns to surface root
• Center (or left-of-right): primary navigation links, 3–6 items max. If you need more, it’s a sidebar surface, not a top-nav surface.
• Right: user menu, settings, search trigger, notifications icon with badge count

Nav item states

• Default: steel-300, Inter 500 14px
• Hover: fog-100, no underline
• Active (current section): electric-400, with a 2px electric-500 bottom border and --fdt-glow-xs halo
• Disabled: steel-500, no hover state

Type case

title case, not uppercase. The top nav carries functional labels, not tactical labels.

Sidebar navigation

The sidebar is the primary nav inside information-dense products (GRIDWATCH, GHOST GRID analytics). It replaces or supplements the top nav.

Anatomy

• Width: 240px (standard), 48px (collapsed/icon-only)
• Background: navy-800, with a navy-600 1px right border
• Section headers: Barlow Condensed 700 UC tracked 0.08em 10px, steel-300. One line, 8px vertical padding.
• Items:
  • Icon (20px, FA Sharp Regular, steel-300) + label (Inter 500 14px, fog-200)
  • Vertical padding: 8px; horizontal: 16px (icon) + 12px gap + label
• Active item:
  • Background navy-700
  • Left border 2px electric-500 with --fdt-glow-xs halo
  • Icon and label in fog-100
• Collapsed mode: only icons visible; labels appear as tooltips on hover. Toggle button at the bottom of the sidebar.

Nested items

• Maximum 2 levels deep. Three-level sidebars become navigational purgatory - if the content needs more depth, restructure the information architecture.
• Nested items indent 16px and render with a 1px navy-600 left border extending from the parent to mark the relationship.
• Expansion control: caret-right rotating to caret-down on the right of the parent.

Breadcrumbs

Breadcrumbs establish the hierarchical position of the current surface. Used when:

• The user is 3+ levels deep in a hierarchy, or
• Multiple paths can lead to the same surface, or
• The parent context matters for the current task

Anatomy

• Type: Inter 400 12px, steel-300
• Separator: / in steel-500 with 8px horizontal padding on each side
• Current item (last): not a link, fog-200 (not fog-100 - the page title itself handles max contrast)
• Position: directly above the page title, 4px gap below the breadcrumb
• Max items: 5. If deeper, collapse middle items as … that expands on click to reveal the full path.

Never breadcrumb the home/root. The FDT logo in the top nav is the root; the breadcrumb starts from the level below.

Example:

Missions / Active / 23-ALPHA / Timeline
                              ^^^^^^^^
                              current - no link

Tabs

Tabs switch between views at the same level of a surface hierarchy. Use when:

• 2–5 related views share the same context (e.g., Overview, Tracks, Events, Log)
• The user needs to move between views without navigating away

Anatomy (wa-tab-group)

• Tab label: Inter 500 13px, UC tracked 0.05em
• Default: steel-300, no underline
• Hover: fog-100, no underline
• Active: fog-100, 2px electric-500 bottom border, --fdt-glow-xs halo
• Disabled: steel-500, cursor not-allowed

Never

• More than 5 tabs. If you need more, it’s a sidebar surface, not a tab surface.
• Two-row tabs that wrap.
• Tabs for forms (use a wizard).
• Tabs for sequential content (use pagination or a timeline view).

Pagination

For lists longer than a single page can comfortably show (typically 50+ items):

Anatomy

• Position: bottom of the list, right-aligned
• Type: Inter 500 13px, JetBrains Mono for page numbers
• Structure: ← Prev · 1 · 2 · [3] · 4 · 5 · … · 12 · Next →
• Current page: electric-400 background + fog-100 text
• Hover: navy-700 background
• Disabled (at first/last): steel-500, no interaction

Also show

a Showing 51–100 of 342 indicator left-aligned, JetBrains Mono 11px, steel-300. Operators need to know where they are in the total, not just which page.

Prefer pagination over infinite scroll for operator lists. Operators need stable positions and predictable navigation, not a scroll surface that keeps revealing content unpredictably. Infinite scroll is a consumer-app pattern optimized for discovery; operator lists are optimized for retrieval.

Mobile and QRF-specific

QRF and any mobile surface use different navigation patterns:

• Bottom tab bar instead of top nav for primary navigation - thumb zone is bottom-half of the screen
• Back-as-primary-action - a persistent back button top-left, always returns one level (like native iOS)
• No sidebars - drawer navigation if multi-section is unavoidable, but the default is flat section structure
• Swipe gestures for tab-level switching, but always paired with visible tab indicators. Swipe is not discoverable alone; it’s a shortcut for users who already know the layout.

Accessibility

• Top nav: <nav role="navigation" aria-label="Main">
• Sidebar: <nav role="navigation" aria-label="Primary">
• Breadcrumbs: <nav aria-label="Breadcrumb"> with an <ol>, last item has aria-current="page"
• Tabs: WAI-ARIA roving tabindex (wa-tab-group handles this automatically)
• Every navigation link has a visible focus state matching the global focus treatment (electric-500 2px border + --fdt-glow-sm)
• Landmarks: every page has a <main> landmark, a <nav>, and optionally <aside> for the sidebar