Color Palette

NVIDIA brand colors and grayscale system used throughout the navigation component.

Brand Colors

Brand Green #76b900 --color-brand-green
Brand Green Hover #8ed100 --color-brand-green-hover

Grayscale System

Black / Gray 1000 #000000 --color-black
Gray 900 #1a1a1a --color-gray-900
Gray 800 #333333 --color-gray-800
Gray 600 #666666 --color-gray-600
Gray 400 #999999 --color-gray-400
Gray 100 #e0e0e0 --color-gray-100
White #ffffff --color-white
CSS Variables 
:root {
  /* Colors - NVIDIA Brand */
  --color-black: #000000;
  --color-gray-1000: #000000;
  --color-gray-900: #1a1a1a;
  --color-gray-800: #333333;
  --color-gray-600: #666666;
  --color-gray-400: #999999;
  --color-gray-100: #e0e0e0;
  --color-white: #ffffff;
  --color-brand-green: #76b900;
  --color-brand-green-hover: #8ed100;
}

Typography

Font family, sizes, and text styling specifications.

Font Family

NVIDIA GTC 2026 NVIDIA Sans (Primary)
Font Stack 
--font-family: 'NVIDIA Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

Font Sizes

Navigation Small Text
14px --font-size-small
Navigation Base Text
16px --font-size-base
Navigation Large Text
18px --font-size-large
Font Size Variables 
:root {
  --font-size-small: 14px;
  --font-size-base: 16px;
  --font-size-large: 18px;
}

Text Styles

Element Size Weight Line Height Transform
Nav Link 16px 400 30px capitalize
Dropdown Link 14px 400 normal none
CTA Button 16px 700 1.25 none
Event Details 16px 400/700 1 none
Mobile Nav Link 18px 400 normal none

Spacing

Consistent spacing values for padding, margins, and gaps.

Core Dimensions

Side Padding 15px --side-padding
Info Bar Height 44px --nav-info-height
Main Nav Height 60px --nav-main-height
Total Nav Height 104px --nav-total-height

Logo Dimensions

Logo Container
190px 104px
Logo Variables 
:root {
  --logo-width: 190px;
  --logo-height: 104px;
}

.logo-img {
  max-height: 42px;
  max-width: 141px;
}

Gap & Padding Values

Element Property Value
Nav Links gap 20px
Nav Link (icon gap) gap 6px
Nav Main Content gap 30px
Info Links gap 15px
CTA Button padding 12px 14px
Dropdown Menu padding 8px 0
Dropdown Link padding 10px 16px
Spacing Variables 
:root {
  /* Spacing */
  --side-padding: 15px;
  --nav-info-height: 44px;
  --nav-main-height: 60px;
  --nav-total-height: 104px;
  --logo-width: 190px;
  --logo-height: 104px;
}

Responsive Breakpoints

Viewport-specific max-widths and behavior changes.

Breakpoint Diagram

Desktop > 1350px
Laptop 1024px - 1350px
Tablet 640px - 1024px
Phone < 640px

Max-Width Values

Breakpoint Media Query Content Max-Width Key Changes
Desktop default 1290px Full navigation, all links visible
Laptop max-width: 1350px 1290px Same as desktop
Tablet max-width: 1024px 954px Mobile menu, hamburger visible, logo collapsed
Phone max-width: 640px 610px Smaller CTA, reduced info bar height

Responsive Dimension Changes

Variable Desktop Tablet (≤1024px) Phone (≤640px)
--nav-info-height 44px 44px 36px
--nav-main-height 60px 60px 60px
--logo-height 104px 60px 60px
Logo max-height 42px 30px 26px
Event details font 16px 14px 12px
Breakpoint Variables 
:root {
  /* Breakpoint max-widths */
  --max-width-desktop: 1290px;
  --max-width-laptop: 1290px;
  --max-width-tablet: 954px;
  --max-width-phone: 610px;
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --nav-info-height: 44px;
    --nav-main-height: 60px;
    --logo-height: 60px;
  }
}

/* Phone */
@media (max-width: 640px) {
  :root {
    --nav-info-height: 36px;
    --nav-main-height: 60px;
    --logo-height: 60px;
  }
}

Components

Live examples of navigation component elements with their code.

Navigation Links

Keynote Topics

CTA Button

Register Now | Log In

Dropdown Menu

Info Bar

AI Conference March 16–19 | San Jose, CA

Interactive States

Visual feedback for different interaction states.

Navigation Collapsed State

When scrolled past 50px, the navigation collapses: info bar hides, logo shrinks, and total height reduces.

Default
Info Bar (44px)
Logo (104px)
Nav Content
Collapsed
Logo (60px)
Nav Content

Link States

Default Nav Link #666666
Hover / Focus Nav Link #e0e0e0
CTA Default Register bg: #76b900
CTA Hover Register bg: #8ed100

Dropdown Icon Rotation

Closed rotate(0)
Open rotate(180deg)

Transitions

Variable Value Usage
--transition-fast 0.2s ease Hover states, icon rotations
--transition-normal 0.3s ease Navigation collapse, mobile menu
--transition-slow 0.4s ease Page transitions (reserved)
CSS Variables 
:root {
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;
}

JavaScript API

Configuration, state management, and event handling.

Configuration

Property Value Description
scrollThreshold 50 Pixels scrolled before nav collapses
debounceDelay 10 Milliseconds for scroll debounce
animationDuration 300 Matches CSS transition duration (ms)
Configuration Object 
const CONFIG = {
  scrollThreshold: 50,        // Pixels to scroll before collapsing
  debounceDelay: 10,          // Debounce delay for scroll events (ms)
  animationDuration: 300,     // Match CSS transition duration (ms)
};

State Object

State Management 
let state = {
  isCollapsed: false,      // Navigation collapsed state
  isMobileMenuOpen: false, // Mobile menu visibility
  lastScrollY: 0,          // Previous scroll position
};

Z-Index Layers

1002 Mobile Menu --z-mobile-menu
1001 Dropdown --z-dropdown
1000 Navigation --z-nav
Z-Index Variables 
:root {
  --z-nav: 1000;
  --z-dropdown: 1001;
  --z-mobile-menu: 1002;
}

Key Functions

Function Description
handleScroll() Toggles collapsed state based on scroll position
toggleMobileMenu() Opens/closes mobile menu overlay
toggleDesktopDropdown(toggle) Toggles dropdown menu for desktop nav
toggleMobileDropdown(toggle) Toggles accordion dropdown in mobile menu
closeMobileMenu() Closes mobile menu and resets state
trapFocus(event) Keeps focus within mobile menu when open

Event Listeners

Event Setup 
function setupEventListeners() {
  // Scroll events (debounced)
  window.addEventListener('scroll', debounce(handleScroll, CONFIG.debounceDelay), { passive: true });
  
  // Hamburger button click
  elements.hamburgerBtn.addEventListener('click', toggleMobileMenu);
  
  // Desktop dropdown toggles
  elements.dropdownToggles.forEach(toggle => {
    toggle.addEventListener('click', (e) => {
      e.stopPropagation();
      toggleDesktopDropdown(toggle);
    });
  });
  
  // Mobile dropdown toggles
  elements.mobileDropdownToggles.forEach(toggle => {
    toggle.addEventListener('click', () => {
      toggleMobileDropdown(toggle);
    });
  });
  
  // Close mobile menu when clicking a link
  elements.mobileMenu.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', closeMobileMenu);
  });
  
  // Keyboard events (Escape to close)
  document.addEventListener('keydown', handleKeydown);
  
  // Click outside to close
  document.addEventListener('click', handleClickOutside);
  
  // Window resize (debounced)
  window.addEventListener('resize', debounce(handleResize, 100));
}

Accessibility Features

  • ✓ Skip Link - Hidden link to skip navigation for keyboard users
  • ✓ ARIA Roles - menubar, menu, menuitem for proper screen reader support
  • ✓ aria-expanded - Tracks dropdown and mobile menu state
  • ✓ aria-hidden - Hides mobile menu from screen readers when closed
  • ✓ Focus Trap - Tab key cycles within mobile menu when open
  • ✓ Escape Key - Closes mobile menu and dropdowns
  • ✓ Focus Management - Returns focus to hamburger when menu closes