API Reference

Complete API documentation for components, utilities, and framework core

Components

Form Components

Display Components

Navigation Components

Layout Components

Utility Components

Reference/API/SecondaryNav

SecondaryNav

Tab navigation component with 4 visual variants, responsive design, and icon support

🔧 Props

Property	Type	Default	Description
tabs*	Array	-	Array of tab objects: { id, label, icon?, description? }
defaultTab	string	tabs[0]?.id	Default active tab id
onTabChange	Function	undefined	Callback when tab changes: (tabId) => void
variant	string	'default'	'default', 'pills', 'underline', 'cards'
size	string	'md'	'sm', 'md', 'lg'
showDescription	boolean	false	Whether to show tab descriptions (if provided)
responsive	boolean	true	Whether to collapse/abbreviate on mobile
persistKey	string	window.location.pathname	Unique key for HMR persistence
class	string	-	Additional CSS classes
...htmlProps	object	{}	Standard HTML attributes for <nav>

✨ Features

Four visual variants for different use cases

Three size options (sm, md, lg)

Reactive active tab tracking with VanJS state

Responsive design with mobile abbreviations

Optional descriptions shown on larger screens

ARIA attributes for accessibility (role="tab", aria-selected)

Tab change callback for external integration

HMR state persistence support with persistKey

Icon support with Oracle Icon Font classes

Flexible layout adapts to tab count and variant

💻 Examples

Underline Variant

javascript•Underline Variant

return SecondaryNav({
  tabs: [
    { id: 'overview', label: 'Overview' },
    { id: 'activity', label: 'Activity' },
    { id: 'settings', label: 'Settings' }
  ],
  variant: 'underline'
})

▶️ Live Preview

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

Pills with Callback

javascript•Pills with Callback

return SecondaryNav({
  tabs: [
    { id: 'all', label: 'All' },
    { id: 'active', label: 'Active' },
    { id: 'completed', label: 'Completed' }
  ],
  variant: 'pills',
  onTabChange: (tabId) => {
    filterStatus.val = tabId;
  }
})

▶️ Live Preview

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

Cards with Icons and Descriptions

javascript•Cards with Icons and Descriptions

return SecondaryNav({
  tabs: [
    {
      id: 'feed',
      label: 'Home Feed',
      icon: 'oj-ux-ico-home',
      description: 'See what\'s happening in your neighborhood'
    },
    {
      id: 'discover',
      label: 'Discover',
      icon: 'oj-ux-ico-location-searching',
      description: 'Find new services and neighbors'
    }
  ],
  variant: 'cards',
  showDescription: true
})

▶️ Live Preview

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

💡 Usage Tips

🔗 Related

Explore vwf

Discover what vwf can do