Navigation

A navigation system with modern hover effects and active state indicators.

🎯 Key Features

🎨 Dynamic Effects

Depth through hover movement, gradient backgrounds, and shadow effects

📱 Responsive Behavior

Optimized navigation experience on all screen sizes

🌟 Active State Display

Animated underline that clearly indicates the current page

🏷️ Badge System

Link status indication with badges like “New”, “Beta”

Dynamic Effects

• Hover Movement: Slight upward movement with translateY(-1px)
• Gradient Background: Subtle gradient effects applied
• Shadow Effects: Depth created with box-shadow

Active State Display

The current page is displayed as follows:

• Darker background color
• Bold font (font-weight: 600)
• Animated underline

📱 Responsive Behavior

Navigation behaves differently based on screen size:

💻 Desktop (1024px+) 📱 Tablet (768px-1023px) 📱 Mobile (under 768px)

• All links arranged horizontally - Sufficient spacing (gap: 1.5rem) - Maximum hover effect utilization

• Slightly reduced spacing (gap: 1rem) - Still maintains horizontal layout

• Switches to hamburger menu - Vertical dropdown menu - Touch-friendly interface

🎨 Style Details

🔗 Basic Link ✨ Hover Effect 🎯 Active State

.nav-bar a {
  position: relative;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: var(--color-muted-foreground);
  transition: all 0.2s ease-in-out;
}

.nav-bar a:hover {
  color: var(--color-foreground);
  background-color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.nav-bar a.active {
  color: var(--color-primary-foreground);
  background-color: var(--color-primary);
  font-weight: 600;
  box-shadow: var(--shadow-md);
}

🏷️ Badge System

Badges can be added to navigation links:

{
  label: "New Feature",
  link: "/new-feature/",
  badge: "New"
}

Badges have the following styles:

• Success color (green)
• Uppercase transformation
• 1.05x scale on hover

⚡ Animations

Underline Animation

Active links display an animated underline at the bottom:

.nav-bar a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-accent);
  animation: slide-in 0.3s ease-out;
}

Gradient Background

All links display a subtle gradient background on hover:

.nav-bar a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-accent);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.nav-bar a:hover::before {
  opacity: 0.1;
}

🌙 Dark Mode

Additional effects are applied in dark mode:

• Glass Effect: backdrop-filter: blur(8px)
• Transparent Background: rgba(255, 255, 255, 0.1)
• Enhanced Contrast: Clearer color distinction

Setup Method

1. Define navigation links in Astro configuration:

   pagePlugin({
     navLinks: [
       {
         label: "Home",
         link: "/",
         attrs: {},
       },
       {
         label: "Documentation",
         link: "/docs/",
         badge: "New",
       },
     ],
   });

2. Each link can have the following properties:

   • label: Text to display
   • link: Link URL
   • badge: Optional badge text
   • attrs: Additional HTML attributes

3. Badges are automatically styled:

   • “New”: Green badge
   • “Beta”: Yellow badge
   • “Deprecated”: Red badge