Jumbotron Popdown Patterns

Overview

Jumbotron popdowns are large, content-rich dropdown menus that appear when hovering over navigation items. They provide a visually engaging way to present multiple navigation options in an organized, scannable format.

Implementation Pattern

Component Structure

components/
  basics/
    JumboDropdown.astro      # Generic dropdown component
    GetLostDropdown.astro    # Custom "Get Lost" dropdown
    ProjectsDropdown.astro   # Custom "Projects" dropdown

Props Interface

interface DropdownItem {
  href: string;
  title: string;
  description: string;
  icon?: string;  // Optional icon URL
}

interface DropdownProps {
  label: string;
  items: DropdownItem[] | Record<string, DropdownItem>;
  isCustomDropdown?: boolean;
}

Styling Conventions

• Container: Fixed width with max-width, centered with auto margins

• Grid Layout: Responsive grid that adapts to content

• Animation: Subtle fade-in and slide-up on hover

• Typography: Clear hierarchy with title and description

• Hover States: Subtle background color change and elevation

• Spacing: Consistent padding and margins

Implementation Example

Basic Usage (JumboDropdown.astro)

---
// Import required components
---

<div class="dropdown-wrapper">
  <button class="dropdown-trigger">{label}</button>
  <div class="jumbo-dropdown">
    <div class="dropdown-grid">
      {items.map(item => (
        <a href={item.href} class="dropdown-item">
          <div class="item-title">{item.title}</div>
          <div class="item-description">{item.description}</div>
        </a>
      ))}
    </div>
  </div>
</div>

Custom Dropdown (ProjectsDropdown.astro)

---
// Import project data
import projectGallery from '@config/project-gallery.json';

// Process and sort projects
const projects = Object.values(projectGallery.projects).sort((a, b) => 
  a.title.localeCompare(b.title)
);
---

<div class="dropdown-wrapper">
  <button class="dropdown-trigger">{label}</button>
  <div class="projects-dropdown">
    <div class="dropdown-header">Our Projects</div>
    <div class="dropdown-grid">
      {projects.map(project => (
        <a href={project.href} class="dropdown-item">
          <div class="item-title">{project.title}</div>
          <div class="item-description">{project.subtitle}</div>
        </a>
      ))}
    </div>
  </div>
</div>

Best Practices

Content Organization

• Group related items together

• Use clear, concise titles (2-3 words)

• Keep descriptions brief (1 short sentence)

• Limit to 6-8 items maximum

Visual Design

• Use consistent spacing and alignment

• Maintain color contrast for readability

• Include subtle hover/focus states

• Ensure touch targets are at least 44x44px

Performance

• Lazy load images/icons

• Optimize animations for 60fps

• Use CSS transforms for smooth animations

• Implement proper ARIA attributes

Accessibility

• Use role="menu" and role="menuitem"

• Implement keyboard navigation

• Add proper focus management

• Include screen reader text where needed

Responsive Behavior

• Stack items vertically on mobile

• Adjust grid columns based on viewport

• Consider a mobile-specific pattern for small screens

• Ensure touch targets remain tappable

Testing Checklist

• Hover/focus states work as expected

• Keyboard navigation functions properly

• Content is readable at all breakpoints

• Animations are smooth and performant

• Screen readers announce content correctly

Future Considerations

• Support for dynamic content loading

• Animation customization options

• Theming support

• Nested dropdowns (if needed)

Related Components

• Header.astro - Main navigation component

• MobileMenu.astro - Mobile-specific navigation

• Dropdown.astro - Basic dropdown component