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. 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); Mobile: 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. 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).
Open Now
Outdoor Seating
Carry Out / Quick Service
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.
§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.
Cross-Section Planning
Make a Day of It
You've found the restaurant — now plan the rest of your visit.
1
Gallery Walk
Start your evening with a stroll through the Short North's gallery row — most are open until 8 PM.
Dining-contextual variant of the Journey Builder. Since the user is already browsing restaurants, Step 1 shifts to Gallery Walk (pre-dinner activity) and Step 2 becomes the dinner itself (a reinforcing anchor rather than a redundant suggestion). Steps 3 and 4 remain the same. Same CSS as the events variant — no additional styles needed.
Compact utility strip — eliminates last practical barriers between a visitor and showing up. Four icon-forward links to Parking + Safety sub-pages. Should feel like a helpful footer band, not a full content section. 4-up horizontal on desktop / 2×2 tablet / vertical stack mobile. No photography.
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.