Skip to content
FiNAN Logo FiNAN Docs

Navbar

The Navbar component provides the main navigation for the FiNAN website with a responsive design that adapts between desktop and mobile views.

Overview

Section titled “Overview”
  • Type: Layout Component
  • Category: Navigation
  • Complexity: Complex
  • File: src/components/Navbar.astro

Features

Section titled “Features”
  • Responsive Design - Desktop horizontal menu, mobile hamburger menu
  • Dropdown Navigation - Representation submenu with country flags
  • Client-Side Interactivity - JavaScript-powered menu toggles
  • Optional Banner - Can display triennial gathering banner above nav
  • Accessibility - ARIA labels and keyboard navigation support

Props

Section titled “Props”
interface Props {
  showBanner?: boolean; // Show BannerTriennialGathering above nav
}

Prop Details

Section titled “Prop Details”
PropTypeDefaultDescription
showBannerbooleantrueWhether to display the triennial gathering banner

Usage

Section titled “Usage”
---
import Navbar from '@/components/Navbar.astro';
---


<Navbar />
Section titled “Navigation Structure”

Desktop Menu Items

Section titled “Desktop Menu Items”
  • Representation (Dropdown)
    • Kingdom of Denmark
    • Finland
    • Iceland
    • Norway
    • Sweden
  • Membership
  • Guides & Resources (External link)
  • News & Events (External link)
  • About Us
  • FAQs
  • Contact Us

Mobile Menu

Section titled “Mobile Menu”

Includes all desktop menu items plus:

  • Be a Member CTA button at the bottom

Implementation Notes

Section titled “Implementation Notes”
Section titled “Dropdown Behavior”

The Representation dropdown is implemented with:

  • Desktop: Hover and click to open
  • Mobile: Tap to expand/collapse
  • Smooth transitions with transition-all duration-200
  • Arrow icon rotation on open/close

Client-Side Script

Section titled “Client-Side Script”

The component loads /js/navbar.js for interactive functionality:

  • Mobile menu toggle
  • Dropdown open/close
  • Click outside to close
  • Keyboard navigation
<script is:inline src="/js/navbar.js" defer></script>

Country Flags

Section titled “Country Flags”

Each country link includes a flag icon from public/assets/flags/:

  • flag_denmark.svg
  • flag_finland.svg
  • flag_iceland.svg
  • flag_norway.svg
  • flag_sweden.svg

Styling

Section titled “Styling”

Desktop Styles

Section titled “Desktop Styles”
  • Horizontal layout with centered logo
  • Navigation links spaced with space-x-6
  • Hover effect: hover:text-blue-900
  • Dropdown positioned absolutely

Mobile Styles

Section titled “Mobile Styles”
  • Logo left-aligned, hamburger menu right-aligned
  • Hidden navigation slides down when opened
  • Full-width links with padding
  • CTA button at bottom of menu

Responsive Breakpoint

Section titled “Responsive Breakpoint”

Uses xl: Tailwind prefix (1280px) for desktop layout:

<div class="hidden xl:block">
  <!-- Desktop menu -->
</div>


<div class="xl:hidden">
  <!-- Mobile menu -->
</div>

Accessibility

Section titled “Accessibility”
  • ARIA Labels: aria-expanded, aria-haspopup, aria-controls
  • Screen Reader Text: sr-only class for external link indicators
  • Keyboard Navigation: Focus states on all interactive elements
  • Semantic HTML: <nav>, <button>, proper heading hierarchy

Common Modifications

Section titled “Common Modifications”
Section titled “Adding a New Navigation Link”

Add to both desktop and mobile sections:

<!-- Desktop -->
<a
  href="/new-page"
  class="rounded-full px-3 py-2 text-lg font-medium text-gray-700 transition-colors hover:text-blue-900"
>
  New Page
</a>


<!-- Mobile -->
<a
  href="/new-page"
  class="block py-2 text-lg font-medium text-gray-700 hover:text-gray-900"
>
  New Page
</a>

Adding a Country to Dropdown

Section titled “Adding a Country to Dropdown”
  1. Add flag SVG to public/assets/flags/
  2. Add link to both desktop and mobile dropdowns:
<a
  href="/representation/new-country"
  class="flex items-center gap-4 rounded-lg px-6 py-4 text-base font-medium text-gray-800 transition-colors hover:bg-gray-50"
  role="menuitem"
>
  <img
    src="/assets/flags/flag_new_country.svg"
    alt=""
    class="h-6 w-6 shrink-0"
  />
  <span>New Country</span>
</a>
Section titled “Changing External Links”

Update the href attributes for:

  • Guides & Resources: Currently points to https://puls.finan.eu.com/tag/guides-resources/
  • News & Events: Currently points to https://puls.finan.eu.com/

Dependencies

Section titled “Dependencies”
  • BannerTriennialGathering.astro - Imported and conditionally rendered
  • public/finan-logo.svg - FiNAN logo
  • public/js/navbar.js - Interactive functionality
  • public/assets/flags/ - Country flag SVGs

Used On

Section titled “Used On”
  • All pages - Included in base layout or directly in pages

Performance Considerations

Section titled “Performance Considerations”
  • Logo uses loading="eager" for faster initial render
  • Navbar script uses defer to avoid blocking
  • Flags in dropdown use lazy loading (when visible)
Section titled “Related Components”

Source Code

Section titled “Source Code”

View the complete implementation:

https://github.com/poncardasm/finan-website/blob/main/src/components/Navbar.astro
https://github.com/poncardasm/finan-website/blob/main/public/js/navbar.js