Navigation

A responsive navigation component that adapts between a horizontal nav bar on desktop and a dropdown menu on mobile.

Usage

import { useState } from 'react';
import Navigation from '@/components/Navigation';

export default function MyPage() {
  const [activeItem, setActiveItem] = useState('dashboard');
  
  const handleSectionChange = (section: string) => {
    setActiveItem(section);
    console.log('Active section:', section);
  };

  return (
    <Navigation 
      activeItem={activeItem}
      onSectionChange={handleSectionChange}
    />
  );
}

Examples

Basic Navigation

A responsive navigation component with a default active item.

Docs

const [activeItem, setActiveItem] = useState('dashboard');

<Navigation 
  activeItem={activeItem}
  onSectionChange={setActiveItem}
/>

With Custom Active Item

Navigation with a different active item selected.

Docs

<Navigation 
  activeItem="charts"
  onSectionChange={setActiveItem}
/>