Skip to main content

​
Navigation Components

The navigation system consists of three interconnected components: Header.astro, Navigation.astro, and NavItem.astro.

​
Header.astro

The main site header with sticky positioning, logo, navigation menu, and primary CTA.

​
Structure

The Header component includes:
  • Sticky positioning with backdrop blur
  • Site logo with icon and brand name
  • Navigation menu (hidden on mobile)
  • “Como ser Socio” CTA button
The header defines the site’s navigation structure: 
const listItems = [
  { tag: "Inicio", link: "/" },
  { tag: "Proyecto", link: "/proyecto" },
  { tag: "Noticias", link: "/noticias" },
  { tag: "Requisitos", link: "/requisitos" },
  { tag: "Contacto", link: "/contacto" },
];

​
Usage Example

Standard implementation (from index.astro:15) 
<Layout title={title} description={description}>
  <Header />
  <!-- Page content -->
</Layout>

​
Styling Details

Container (Header.astro:13-15): 
sticky top-0 z-50 w-full
px-4 py-4 md:px-20 lg:px-40
border-b border-black/30
bg-background-light/80 backdrop-blur-md
Logo (Header.astro:17-20):
  • Material Symbol home_pin icon
  • “RENACER” wordmark
  • Primary color branding
  • Uppercase, bold typography
CTA Button (Header.astro:23-27): 
bg-primary hover:bg-primary/90
text-white px-6 py-2 rounded-lg
text-sm font-bold transition-all shadow-md
Source location: /workspace/source/src/components/Header.astro:1-30 Container component that renders the navigation menu from an array of items.

​
Props

​
listItems
Array<{tag: string, link: string}>
required
Array of navigation items with display text and URL paths.

​
Features

  • Hidden on mobile, visible on medium screens and up (hidden md:flex)
  • Horizontal flexbox layout with gap spacing
  • Iterates through listItems to generate NavItem components

​
Implementation

Navigation structure (Navigation.astro:10-20): 
<nav class="hidden md:flex items-center gap-8">
  <ul class="flex items-center gap-4">
    {
      listItems.map(({ tag, link }) => (
        <li>
          <NavItem tag={tag} link={link} />
        </li>
      ))
    }
  </ul>
</nav>

​
Usage Example

import Navigation from "./Navigation.astro";

const navItems = [
  { tag: "Home", link: "/" },
  { tag: "About", link: "/about" },
  { tag: "Contact", link: "/contact" },
];

<Navigation listItems={navItems} />
Source location: /workspace/source/src/components/Navigation.astro:1-21 Individual navigation link component.

​
Props

​
tag
string
required
The display text for the navigation link.
​
link
string
required
The URL path for the navigation link.

​
Styling

Link styles (NavItem.astro:5-7): 
text-sm font-semibold
hover:text-primary
transition-colors

​
Implementation

<a
  class="text-sm font-semibold hover:text-primary transition-colors"
  href={link}>
  {tag}
</a>
Source location: /workspace/source/src/components/NavItem.astro:1-9 The three-component system provides:
  1. Header: Top-level container with branding and layout
  2. Navigation: List container that maps over nav items
  3. NavItem: Individual link with consistent styling

​
Data Flow

Header.astro
  ↓ (defines listItems)
Navigation.astro
  ↓ (receives listItems as prop)
  ↓ (maps over array)
NavItem.astro
  ↓ (receives tag and link)
  ↓ (renders individual link)

​
Responsive Behavior

​
Desktop (md and up)

  • Full navigation menu visible
  • Horizontal layout with consistent spacing
  • Hover effects on links

​
Mobile (below md breakpoint)

  • Navigation menu hidden (hidden md:flex)
  • Only logo and CTA button visible
  • Note: Mobile menu implementation not present in current source

​
Customization Examples

​
Adding a new navigation item

In Header.astro, update the listItems array: 
const listItems = [
  { tag: "Inicio", link: "/" },
  { tag: "Proyecto", link: "/proyecto" },
  { tag: "Noticias", link: "/noticias" },
  { tag: "Requisitos", link: "/requisitos" },
  { tag: "Galería", link: "/galeria" }, // New item
  { tag: "Contacto", link: "/contacto" },
];
To highlight the current page, you could extend NavItem.astro: 
---
const { tag, link } = Astro.props;
const isActive = Astro.url.pathname === link;
---

<a
  class:list={[
    "text-sm font-semibold transition-colors",
    isActive ? "text-primary" : "hover:text-primary"
  ]}
  href={link}
>
  {tag}
</a>

​
Best Practices

  1. Keep navigation concise: Limit to 5-7 top-level items for clarity
  2. Descriptive labels: Use clear, action-oriented navigation text
  3. Consistent ordering: Maintain the same navigation order across all pages
  4. Mobile consideration: Plan for mobile menu implementation (hamburger, drawer, etc.)
  5. Accessibility: Ensure proper semantic HTML (<nav>, <ul>, <li>) for screen readers