Navigation: 3 mega menus (Events, Eat & Drink, Explore) with 2/3 link pane + 1/3 editorial spotlight panel. 2 simple dropdowns (Parking & Safety, About) with icon + label + description per row. Donate CTA styled as distinct button. Per SNA_Navigation_Strategy_OSA: mega menus trigger on hover (200ms open / 300ms close delay in production); editorial panels are CMS-managed single post references with fallback defaults; Explore groups subpages by section (Art & Culture, Shopping, Experiences, Stay); Shopping nav shows only Fashion, Gifts, and All Shopping (analytics-informed — other categories accessible via landing page); Events editorial panel uses NAVY background; Eat & Drink and Explore editorial panels use white background. Mobile: all menus convert to accordion drawers, editorial panels omitted.
The complete Short North dining guide — from morning coffee to last call. Filter by category, price, vibe, or just browse.
Showing 127 places
§1 — Directory Header. Breadcrumb: Home › Eat & Drink › All Restaurants & Bars. H1 establishes scope — this is the exhaustive directory, not an editorial landing page. Subhead is functional, not aspirational. Result count updates dynamically as category and filters are applied. This page corresponds to the "All Restaurants & Bars" link in the Eat & Drink mega menu. Tone: utility-forward — people come here to find a specific place or browse the full inventory.
All
127
Breakfast & Brunch
18
Lunch
32
Dinner
47
Bars & Nightlife
22
Coffee & Tea
11
Sweets & Treats
8
§2 — Category Navigation Strip. 7 category chips including "All" (active by default). Each chip includes an icon + label + live count. Clicking a category filters the grid below and updates the result count in the header. Counts are dynamic. Desktop: single-row flex. Mobile: horizontal scroll with overflow. Maps directly to the 8 Eat & Drink subcategories defined in the navigation strategy. Categories are mutually exclusive — only one active at a time (unlike other filters which use AND logic). When a category is active, the header H1 updates contextually (e.g., "Dinner in the Short North").
Open Now
★ Short North Original
Price
$
$$
$$$
☂ Outdoor Seating
Vibe
Cuisine
Sort
Featured
Clear All
§3 — Filter Bar. Same filter system as the subcategory listing pages, with one addition: Cuisine dropdown (Italian, Japanese, American, Mexican, Mediterranean, Indian, Thai, etc.). On subcategory pages, the category is already set by the page context. Here, since the category strip above handles primary category filtering, the filter bar focuses on secondary refinement. All filters use AND logic with the active category. Sticky on scroll. "Open Now" default active state shown for wireframe demonstration — implementation should default to no active filters. Vibe dropdown: Date Night, Late Night, Family-Friendly, Dog-Friendly, Good for Groups. Sort options: Featured (default), A–Z, Newest, Open Now. URL query params for shareable filtered views (e.g., /dining-directory/?category=dinner&price=2&vibe=date-night). Mobile: collapses to horizontal scroll + "All Filters" drawer with badge count for active filter count.
Open Now
Atmosphere photo
BrunchAmerican
$$
Restaurant Name
★ Short North OriginalFamily-FriendlyOutdoor Seating
§4 — Results Grid. Same business card pattern as subcategory listing pages. 3-column desktop, 2-column tablet, 1-column mobile. 9 cards shown per page (3×3) to demonstrate variety across categories. In the "All" view, cards are interleaved across categories — showing the full diversity of the directory. Each card: photo, category tags (max 2), price tier, name, vibe badges (max 3), CTA. Entire card is clickable → business profile. When a category chip above is active, grid filters to show only that category. Pagination: both paged (numbered) and "Load More" patterns shown — implementation should choose one. With 127 businesses at 9 per page = ~14 pages. "Load More" may be better UX for mobile. ★ Sort order for "Featured": SNA-curated weighting (editable in CMS). Newly added businesses get a temporary boost. "Short North Original" businesses receive a slight weight increase. ★ Consider "infinite scroll" as alternative to pagination for mobile — test engagement metrics.
Dining by Moment
Date night, brunch with friends, solo coffee — find the right spot for any occasion.
§5 — Cross-Sell Footer. Three cards linking to related content: (1) Eat & Drink landing page for editorial/moment-based discovery; (2) Events page filtered to food/drink events; (3) Parking & Safety for practical visit planning. The directory is utilitarian — cross-sells reintroduce editorial warmth and practical support. Tone: helpful, not pushy. These are "you might also need" links, not upsells.
PRE-FOOTER — Global component displayed on every page. Combines newsletter signup + social links into a persistent strip above the footer.
Footer consolidates full sitemap. Social links in pre-footer above. Links connect to wireframes where available; # = placeholder for pages not yet wireframed.