Navigation Demo
This page demonstrates the new multi-level navigation system. Try clicking on different navigation items to see the secondary navigation appear.
How It Works
Main Navigation
- • About - Shows secondary navigation with: Colophon, Now, Feeds
- • Garden - Shows secondary navigation with: Evergreen, TIL, Bookshelf, Stories, Poems
- • Stream - Shows secondary navigation with: Blog, Micro, Photos
- • Nordletter - Single level navigation
Features
- • Responsive design for mobile and desktop
- • Active state highlighting
- • Secondary navigation appears automatically
- • Clean, consistent layout across all devices
- • Smooth transitions and hover effects
Try the Navigation
Click on any navigation item above to see how the secondary navigation works. The secondary navigation will appear below the main navigation when you're in the About, Garden, or Stream sections.
Technical Implementation
Component Structure
- •
MultiLevelNavigation.astro- Main navigation component - • Responsive design with Tailwind CSS
- • Clean, semantic HTML structure
- • Automatic active state detection
Navigation Logic
- • Main navigation always visible
- • Secondary navigation appears for About/Garden/Stream
- • Active states based on current page path
- • Mobile-first responsive design