Navigation Components - Aviv Keller Portfolio

Overview

Navigation components provide consistent site-wide navigation and branding. They’re located in src/components/navigation/. A responsive navigation header with mobile menu support and scroll-based styling.

Props

Array of navigation items:

Link text

Link URL

Link target (e.g., "_blank" for external links)

siteName

string

required

Site name displayed in logo

isStatic

boolean

default:false

If true, header has static white background. If false, header is transparent on top and becomes white on scroll.

Usage

---
import Header from "../components/navigation/Header.astro";

const navigation = [
  { title: "Projects", href: "/projects" },
  { title: "Experience", href: "/experience" },
  { title: "Blog", href: "/blog" },
  { title: "GitHub", href: "https://github.com/username", target: "_blank" },
];
---

<Header
  navigation={navigation}
  siteName="Aviv Keller"
  isStatic={false}
/>

Features

Dynamic Mode (`isStatic={false}`)

Used on the home page with hero section:

Above scroll threshold: Transparent background, white text
Below scroll threshold (50px): White background, colored text, shadow
Smooth color transitions on scroll

Static Mode (`isStatic={true}`)

Used on other pages:

Always white background
Always colored text
Always has shadow
Adds spacing below header (h-16 spacer)

Hamburger icon on small screens
Full-screen overlay menu
Smooth slide animation
Accessible with aria-expanded

Responsive Design

Desktop: Horizontal menu (md:flex)
Mobile: Hamburger menu icon
Logo always visible
Smooth transitions between states

Behavior

The header includes client-side JavaScript for:

Scroll detection: Changes styling at 50px scroll
Mobile menu toggle: Opens/closes overlay
Dynamic styling: Updates colors and shadows

Styling Customization

The header styling is controlled by JavaScript that toggles Tailwind classes:

// Dynamic mode - changes on scroll
navbar?.classList.toggle("bg-white", isScrolled);
navbar?.classList.toggle("shadow-md", isScrolled);
logo?.classList.toggle("text-red-600", isScrolled);
logo?.classList.toggle("text-white", !isScrolled);

const navigation = [
  { title: "Home", href: "/" },
  { title: "Projects", href: "/projects" },
  { title: "Experience", href: "/experience" },
  { title: "Blog", href: "/blog" },
  { title: "Achievements", href: "/achievements" },
  {
    title: "GitHub",
    href: "https://github.com/avivkeller",
    target: "_blank"
  },
];

A simple footer with copyright and social links.

Props

siteName

string

required

Site name for copyright notice

Array of social media links:

Social media profile URL

Iconify icon name (e.g., "mdi:github")

Accessible label for the link

Link relationship (optional, e.g., "me")

Usage

---
import Footer from "../components/navigation/Footer.astro";

const socialLinks = [
  {
    href: "https://github.com/avivkeller",
    icon: "mdi:github",
    label: "GitHub",
    rel: "me"
  },
  {
    href: "https://twitter.com/username",
    icon: "mdi:twitter",
    label: "Twitter"
  },
  {
    href: "https://linkedin.com/in/username",
    icon: "mdi:linkedin",
    label: "LinkedIn"
  },
];
---

<Footer siteName="Aviv Keller" socialLinks={socialLinks} />

Features

Automatic current year in copyright
Responsive layout (stacked on mobile, horizontal on desktop)
Integrated SocialLinks component
Light gray background (bg-gray-100)
Top margin separation from content

The footer uses the SocialLinks component internally, which renders:

Icon buttons for each social link
Hover effects
Accessible labels
External link handling

Layout Integration

Main Layout (Home Page)

---
import Header from "../components/navigation/Header.astro";
import Footer from "../components/navigation/Footer.astro";
import { navigation, socialLinks, siteConfig } from "../data";
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Head content -->
  </head>
  <body>
    <Header
      navigation={navigation}
      siteName={siteConfig.name}
      isStatic={false}
    />
    
    <main>
      <slot />
    </main>
    
    <Footer
      siteName={siteConfig.name}
      socialLinks={socialLinks}
    />
  </body>
</html>

Static Layout (Other Pages)

<Header
  navigation={navigation}
  siteName={siteConfig.name}
  isStatic={true}
/>

<main class="min-h-screen">
  <Section background="bg-white" padding="py-12">
    <slot />
  </Section>
</main>

<Footer
  siteName={siteConfig.name}
  socialLinks={socialLinks}
/>

Accessibility

Header

Mobile menu button: Has aria-expanded attribute
Mobile menu button: Has aria-label="Toggle menu"
External links: Automatically include target="_blank"
Keyboard navigation: All links are keyboard accessible

Social links: Each has descriptive label for screen readers
External links: Use rel attribute for security
Semantic HTML: Uses <footer> element

Customization

Changing Colors

Edit the header scroll behavior in Header.astro:86-99:

window.addEventListener("scroll", () => {
  const isScrolled = window.scrollY > 50;
  
  // Customize these color classes
  logo?.classList.toggle("text-red-600", isScrolled);
  logo?.classList.toggle("text-white", !isScrolled);
});

Extend the footer by editing Footer.astro:

<footer class="mt-12 bg-gray-100 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-col items-center justify-between md:flex-row">
      <div class="mb-4 text-gray-600 md:mb-0">
        © {currentYear} {siteName}. All rights reserved.
      </div>
      
      <!-- Add custom links here -->
      <div class="mb-4 flex gap-4">
        <a href="/privacy">Privacy</a>
        <a href="/terms">Terms</a>
      </div>
      
      <SocialLinks links={socialLinks} />
    </div>
  </div>
</footer>

Best Practices

Keep navigation items concise (4-6 items)
Put most important pages first
Use external link icons for clarity
Group related pages in the future with dropdowns

Mobile Experience

Test mobile menu on real devices
Ensure touch targets are large enough (44x44px minimum)
Provide visual feedback for active page
Consider adding page transitions

Performance

Header JavaScript is inline for instant interactivity
Minimize reflows by toggling classes instead of inline styles
Use CSS transitions for smooth animations

These utility components enhance navigation and user interaction.

BackLink

A back navigation link with an arrow icon, useful for detail pages.

Props

href

string

required

The URL to navigate back to (e.g., /projects, /blog).

label

string

required

The label text for the back link (e.g., “Projects”, “Blog”).

Usage

src/pages/project/[id].astro

---
import BackLink from "../../components/common/BackLink.astro";
---

<BackLink href="/projects" label="Projects" />

Output

Renders: ← Back to Projects (with hover effect changing color to red-700)

ShareButtons

Social media share buttons for blog posts or project pages.

Props

url

string

required

The full URL to share (e.g., https://aviv.sh/blog/post-slug).

title

string

required

The title of the content being shared.

description

string

required

A brief description of the content.

Usage

src/pages/blog/[slug].astro

---
import ShareButtons from "../../components/common/ShareButtons.astro";

const { title, description } = Astro.props;
const pageUrl = new URL(Astro.url.pathname, Astro.site);
---

<ShareButtons 
  url={pageUrl.toString()} 
  title={title} 
  description={description} 
/>

Supported Platforms

X (Twitter)
LinkedIn
Facebook
Reddit
Email

SocialLinks

Displays a horizontal list of social media icons with links.

Props

links

SocialLink[]

required

Array of social link objects with href, icon, and label properties.

Usage

src/components/navigation/Footer.astro

---
import SocialLinks from "../common/SocialLinks.astro";
import { socialLinks } from "../../data";
---

<SocialLinks links={socialLinks} />

SocialLink Type

interface SocialLink {
  href: string;      // URL to social profile
  icon: string;      // Iconify icon name
  label: string;     // Accessible label
  rel?: string;      // Optional rel attribute
}

UI Elements

Learn about Icon and other UI components used in navigation

Sections

See how navigation integrates with page sections

Getting Started

Content Management

Customization

Components

Deployment

Reference

​Overview

​Header

​Props

​Usage

​Features

​Dynamic Mode (isStatic={false})

​Static Mode (isStatic={true})

​Mobile Menu

​Responsive Design

​Behavior

​Styling Customization

​Example Navigation Data

​Footer

​Props

​Usage

​Features

​Social Links Component

​Layout Integration

​Main Layout (Home Page)

​Static Layout (Other Pages)

​Accessibility

​Header

​Footer

​Customization

​Changing Colors

​Adding Footer Links

​Best Practices

​Navigation Structure

​Mobile Experience

​Performance

​Common Navigation Components

​BackLink

​Props

​Usage

​Output

​ShareButtons

​Props

​Usage

​Supported Platforms

​SocialLinks

​Props

​Usage

​SocialLink Type

​Related Components

UI Elements

Sections

Build docs developers (and LLMs) love

Overview

Header

Props

Usage

Features

Dynamic Mode (`isStatic={false}`)

Static Mode (`isStatic={true}`)

Mobile Menu

Responsive Design

Behavior

Styling Customization

Example Navigation Data

Footer

Props

Usage

Features

Social Links Component

Layout Integration

Main Layout (Home Page)

Static Layout (Other Pages)

Accessibility

Header

Footer

Customization

Changing Colors

Adding Footer Links

Best Practices

Navigation Structure

Mobile Experience

Performance

Common Navigation Components

BackLink

Props

Usage

Output

ShareButtons

Props

Usage

Supported Platforms

SocialLinks

Props

Usage

SocialLink Type

Related Components