Navigation System Demo

Comprehensive navigation system with all available routes

Breadcrumb Navigation
Shows current page location
Main Navigation
Primary site navigation for public users
Student Navigationstudent
Routes available to authenticated students
Route Statistics
Overview of all available routes in the application
35
Total Routes
17
Public Routes
18
Protected Routes
4
Dynamic Routes
Navigation System Features

✨ Features

  • • Comprehensive route mapping
  • • User type-based filtering
  • • Authentication-aware navigation
  • • Responsive design
  • • Icon support
  • • Breadcrumb navigation
  • • Active state management
  • • Nested route support

🎯 Use Cases

  • • Main site navigation
  • • User dashboards
  • • Sidebar menus
  • • Footer links
  • • Breadcrumb trails
  • • Quick navigation widgets
  • • Site mapping
  • • Development debugging
Implementation Example
How to use the navigation components in your code
import Navigation, { MainNavigation, StudentNavigation } from '@/components/navigation/Navigation';

// Basic navigation
<Navigation 
  routes={PUBLIC_ROUTES} 
  orientation="horizontal"
  showIcons={true}
/>

// User-specific navigation
<StudentNavigation 
  isAuthenticated={true}
  currentUserType="student"
  className="space-y-2"
/>

// Custom navigation with filtering
<Navigation 
  routes={ALL_ROUTES}
  filterByUserType="professor"
  orientation="vertical"
  showDescriptions={true}
/>