Index Nav Component

Basic Vertical Navigation

Simple vertical list of navigation links for page sections

<nav class="elv-index-nav" aria-label="Page sections">
  <a href="#section-1" class="elv-index-nav__item elv-index-nav__item--active">
    Overview
  </a>
  <a href="#section-2" class="elv-index-nav__item">
    Features
  </a>
  <a href="#section-3" class="elv-index-nav__item">
    Pricing
  </a>
</nav>

Horizontal Navigation

Horizontal layout for narrow content or top-level navigation

<nav class="elv-index-nav elv-index-nav--horizontal" aria-label="Article sections">
  <a href="#intro" class="elv-index-nav__item elv-index-nav__item--active">
    Introduction
  </a>
  <a href="#methodology" class="elv-index-nav__item">
    Methodology
  </a>
</nav>

Sidebar Navigation

Fixed sidebar with active indicator border

<nav class="elv-index-nav elv-index-nav--sidebar" aria-label="Documentation">
  <a href="#getting-started" class="elv-index-nav__item elv-index-nav__item--active">
    Getting Started
  </a>
  <a href="#components" class="elv-index-nav__item">
    Components
  </a>
</nav>

With Icons

Icons provide visual recognition for sections

<a href="#account" class="elv-index-nav__item elv-index-nav__item--active">
  <svg class="elv-index-nav__icon" viewBox="0 0 16 16" fill="currentColor">
    <path d="..."/>
  </svg>
  Account Settings
</a>

Compact Size

Smaller padding for dense interfaces

<nav class="elv-index-nav elv-index-nav--compact">
  <a href="#quick-1" class="elv-index-nav__item elv-index-nav__item--active">
    Quick Start
  </a>
</nav>

Interactive Example

Click navigation items to scroll to content sections

Usage Guidelines

• Purpose: Use for table of contents or anchor links to page sections
• vs Tabs: Tabs switch content views; index nav scrolls to content on same page
• Active State: One item should be active at a time, tracking current section
• Anchors: Always use anchor links (href="#section-id") for proper navigation
• Smooth Scroll: Set scroll-behavior: smooth on html element
• Vertical: Default for sidebars and content navigation
• Horizontal: Use for narrow content or when space is limited
• Icons: Optional; use when they clarify section type

Accessibility Notes

• Semantic HTML: Use <nav> element with aria-label
• Links: Use anchor tags with proper href attributes
• Active State: Use aria-current="location" on active item
• Keyboard: Standard link keyboard navigation (Tab to focus, Enter to activate)
• Focus Visible: Purple outline indicates keyboard focus
• Skip Links: Consider adding skip link for keyboard users

Design System Specs