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