Secondary Nav

Tab-style navigation component designed to stack below a primary header. Used for section/tab navigation within a page, with sticky positioning that keeps it visible during scroll.

Key Features:
  • Sticky positioning that automatically stacks below Header component
  • Glass morphism effect with backdrop blur for modern aesthetic
  • Active state highlighting with primary color background
  • Horizontal scrollable on mobile for responsive design
  • Tab-style buttons with smooth transitions
  • Keyboard accessible with focus indicators and aria-current
  • Theme-aware colors using CSS custom properties
  • Z-index coordination (z-40) to sit below Header (z-50)

Sticky Positioning: Uses top-16 lg:top-20 to position exactly below the Header's height (h-16 lg:h-20), creating a seamless double-stack navigation pattern. Content scrolls underneath both the Header and SecondaryNav.

Live Example

Code Example

import { SecondaryNav } from '@opencosmos/ui';
import { useState } from 'react';

function MyPage() {
  const [activeSection, setActiveSection] = useState('overview');

  const sections = [
    { id: 'overview', label: 'Overview' },
    { id: 'features', label: 'Features' },
    { id: 'pricing', label: 'Pricing' },
    { id: 'docs', label: 'Documentation' },
  ];

  return (
    <>
      {/* Primary Header would be here */}
      <SecondaryNav
        items={sections}
        activeId={activeSection}
        onItemChange={setActiveSection}
      />
      {/* Page content scrolls below both headers */}
      <main>
        {/* Content based on activeSection */}
      </main>
    </>
  );
}

Sticky Header & Scrolling Behavior

The SecondaryNav uses sticky positioning to remain visible at the top of the viewport while content scrolls underneath it. It automatically positions itself below the primary header.

How It Works:
  • Sticky Position: position: sticky keeps it visible during scroll
  • Top Offset: top-16 lg:top-20 positions it below Header (64px mobile, 80px desktop)
  • Z-Index: z-40 ensures it sits above page content but below Header (z-50)
  • Glass Effect: backdrop-blur-xl creates semi-transparent glass morphism
  • Content Flow: Page content scrolls normally, passing under both headers

Visual Stack: When scrolling, the visual hierarchy is: Header (top, z-50) → SecondaryNav (middle, z-40) → Page Content (bottom, z-auto). The glass morphism effect on SecondaryNav allows you to see content blurred underneath it as it scrolls.

Props Reference

items: SecondaryNavItem[]

Required. Array of navigation items with id and label properties.

activeId: string

Required. The ID of the currently active item.

onItemChange: (id: string) => void

Required. Callback function called when a navigation item is clicked.

className?: string

Optional. Additional CSS classes for customization.