Jumbotron Popdown Patterns

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

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

Props Interface

typescript 
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)

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)

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)
  • Header.astro - Main navigation component
  • MobileMenu.astro - Mobile-specific navigation
  • Dropdown.astro - Basic dropdown component