QNFO Design System

Unified Navigation Components — v1.0

Shared top nav + footer for all *.qnfo.org and *.qwav.tech sites

Components

.qnfo-nav — Top Navigation Bar

<nav class="qnfo-nav"> <div class="qnfo-nav-inner"> <a class="qnfo-nav-logo" href="/"> <span class="qnfo-nav-logomark">◈</span> <span class="qnfo-nav-wordmark">QNFO</span> </a> <div class="qnfo-nav-links"> <a class="qnfo-nav-link active">Active</a> <a class="qnfo-nav-link">Link</a> <div class="qnfo-nav-dropdown"> <button class="qnfo-nav-trigger">Dropdown <span class="qnfo-nav-caret">▾</span></button> <div class="qnfo-nav-menu"> ... </div> </div> </div> </div> </nav>
.qnfo-nav
Top-level navigation bar — fixed position, full-width
.qnfo-nav-inner
Content container — max-width + padding
.qnfo-nav-logo
Logo link with logomark + wordmark
.qnfo-nav-link
Individual navigation link
.qnfo-nav-dropdown
Dropdown container — hover/focus opens menu
.qnfo-nav-menu
Dropdown menu — positioned below trigger
.qnfo-nav-item
Dropdown menu item
.active
Active/current state indicator
Resources
Documentation GitHub
Projects
QWAV QNFO Archive
<div class="qnfo-footer-links"> <div class="qnfo-footer-link-group"> <div class="qnfo-footer-link-label">Resources</div> <a href="#">Documentation</a> <a href="#">GitHub</a> </div> </div>
.qnfo-footer-links
Footer link container — grid layout on desktop
.qnfo-footer-link-group
Logical grouping of footer links
.qnfo-footer-link-label
Group heading label

.qnfo-chapter-nav — Chapter Navigation

<nav class="qnfo-chapter-nav"> <a class="qnfo-chapter-prev" href="#">Previous</a> <span class="qnfo-chapter-current">Current</span> <a class="qnfo-chapter-next" href="#">Next</a> </nav>
.qnfo-chapter-nav
Previous/Next navigation bar for multi-page documents
.qnfo-chapter-prev / .qnfo-chapter-next
Directional links with arrows (← / →)
.qnfo-chapter-current
Current position indicator

CSS Custom Properties

Define these in your :root to customize the navigation appearance.

:root { --qnfo-sans: 'Segoe UI', system-ui, sans-serif; --qnfo-serif: Georgia, 'Times New Roman', serif; --qnfo-bg: #0a0a0f; /* page background */ --qnfo-card-bg: #141420; /* card/surface background */ --qnfo-border: #2a2a3a; /* borders / dividers */ --qnfo-text: #e2e2e8; /* primary text */ --qnfo-text-light:#c0c0d0; /* secondary text */ --qnfo-muted: #8888a0; /* tertiary / muted text */ --qnfo-accent: #7c8aff; /* accent / highlight color */ }

Usage

  1. Define CSS variables in your :root or theme stylesheet
  2. Include css/qnfo-navigation.css via <link>
  3. Add <nav class="qnfo-nav">...</nav> to your page
  4. The CSS automatically hides any legacy .nav elements when .qnfo-nav is present