Skip to main content
The navigation components provide site-wide navigation structure including desktop navbar, mobile drawer menu, footer, and contextual side navigation. The main navigation bar with logo, navigation links, dropdown menu, and theme switcher.

​
Props

The Navbar component doesn’t accept props but reads from:
  • Astro.url.pathname for active link highlighting
  • siteConfig for logo and site information

​
Usage

---
import { Navbar } from '@/components/navs';
---

<Navbar />

​
Features

  • Sticky header with backdrop blur
  • Profile image as home link
  • Main navigation links (Home, About, Work, Projects, Advisory, Contact)
  • “Writing” dropdown with Resources, Operating Notes, Blog
  • Active link highlighting with border
  • Theme switcher integration
  • Glass morphism effect with bg-secondary/20
  • Hamburger menu button (hidden on desktop)
  • Passes all navigation links to MobileNav component
  • Responsive breakpoint at md (768px)
const navLinks = [
  { name: 'Home', href: '/' },
  { name: 'About', href: isHomePage ? '#about' : '/#about' },
  { name: 'Work', href: isHomePage ? '#work' : '/#work' },
  { name: 'Projects', href: isHomePage ? '#projects' : '/projects' },
  { name: 'Advisory', href: '/advisory' },
  { name: 'Contact', href: '/contact' },
];

const moreLinks = [
  { name: 'Resources', href: '/resources' },
  { name: 'Operating Notes', href: '/operating-notes' },
  { name: 'Blog', href: isHomePage ? '#blogs' : '/blog' },
];
The component uses a helper function to determine active links: 
const isActive = (href: string) => {
  if (href === '/' && pathname === '/') return true;
  if (href.startsWith('#') && pathname === '/') return false;
  if (href.startsWith('/') && !href.includes('#')) {
    return pathname.startsWith(href) && href !== '/';
  }
  return false;
};

​
Customization

To modify navigation links, edit the navLinks and moreLinks arrays in the component file: ~/workspace/source/src/components/navs/Navbar.astro:10

​
MobileNav

A slide-out drawer navigation for mobile devices with animations and theme switching.

​
Props

​
navLinks
Array<{name: string, href: string}>
required
Array of navigation link objects to display in the mobile menu

​
Usage

---
import { MobileNav } from '@/components/navs';

const links = [
  { name: 'Home', href: '/' },
  { name: 'About', href: '/#about' },
  // ... more links
];
---

<MobileNav navLinks={links} />

​
Features

  • Slides in from right with backdrop blur
  • Staggered animation for navigation items
  • Smooth transitions with configurable delays
  • Transform and opacity animations
  • Closes with backdrop click or Escape key

​
Interaction Features

The MobileNav component includes:
  • Open trigger: Hamburger button in Navbar
  • Close methods: Close button, backdrop click, Escape key, link click
  • Body scroll lock: Prevents background scrolling when open
  • Accessibility: ARIA attributes, inert state when closed
  • Astro integration: Reinitializes after page transitions

​
Styling

Active links receive special styling: 
bg-primary/10 
text-primary 
font-semibold 
border-l-4 
border-primary

​
Animation Delays

Each navigation item has a staggered animation: 
style={`transition-delay: ${index * 50}ms`}
Site footer with about section, social links, newsletter signup, and copyright information.

​
Usage

---
import { Footer } from '@/components/navs';
---

<Footer />

​
Features

  • Site tagline from siteConfig
  • Social media icons with hover effects
  • Grid layout: icon grid adapts to number of socials
  • Border and background color transitions
  • NewsletterForm component
  • Newsletter signup functionality
  • Form ID: footer-newsletter-form
  • Copyright notice with current year
  • “Built with ❤️ using Astro” message
  • Designer credit with link
  • Responsive flex layout

​
Content Sources

The footer fetches data from: 
---
const socials = await getCollection('socials');
---

​
Social Icons

Social icons are rendered dynamically based on the icon field:
  • Stroke icons: Email icon uses stroke rendering
  • Fill icons: All other social icons use filled paths

​
Newsletter Integration

The footer includes a newsletter form with ID footer-newsletter-form. The form is handled by the NewsletterForm component’s client-side script.

​
SideNav

Contextual navigation for the About section with smooth scrolling to page sections.

​
Usage

---
import SideNav from '@/components/SideNav.astro';
---

<div class="md:sticky md:top-24">
  <SideNav />
</div>

​
Features

The component automatically highlights the active section based on scroll position:
  • Checks if section is in viewport (within 200px of top)
  • Adds border, background, and text color to active item
  • Updates dynamically on scroll
  • Initializes on page load

​
Interactive Features

Click Behavior: 
button.addEventListener('click', () => {
  const sectionId = button.getAttribute('data-section');
  const section = document.getElementById(sectionId);
  
  if (section) {
    section.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
});
Scroll Highlighting: 
const isInView = rect.top <= 200 && rect.bottom >= 200;

​
Styling

The component features:
  • Gradient line accent
  • Animated pulse indicator
  • Hover state transitions
  • Border-left highlight for active item
  • Responsive spacing and sizing

​
Layout Context

Best used in a sticky container on desktop: 
<div class="hidden md:block md:sticky md:top-24">
  <SideNav />
</div>
The About component demonstrates this pattern: ~/workspace/source/src/components/home/About.astro:35
  • Use Navbar for desktop (md and up)
  • Use MobileNav for mobile (below md)
  • Ensure both have same links for consistency
  • Test touch targets on mobile (minimum 44x44px)
  • Add proper ARIA labels
  • Support keyboard navigation
  • Implement focus states
  • Use semantic HTML elements
  • Add skip-to-content links
  • Use Astro’s View Transitions for smooth navigation
  • Lazy load mobile menu content
  • Optimize backdrop blur effects
  • Minimize JavaScript for menu interactions

​
Complete Navigation Example

Here’s how to implement a full navigation system: 
---
import { Navbar, Footer } from '@/components/navs';
---

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- Sticky header -->
    <Navbar />

    <!-- Main content -->
    <main>
      <slot />
    </main>

    <!-- Footer -->
    <Footer />
  </body>
</html>
This structure ensures consistent navigation across all pages with proper mobile support and footer content.

Build docs developers (and LLMs) love

Get started for freeTalk to us