Category 1: Navigation & Menus

21 Expert-crafted Claude.AI prompts for creating Shopify navigation elements

Back to All Categories
Navigation & Menus Product Grids & Listings Hero Banners & Media Forms & Signups Sliders & Carousels Content Blocks & Accordions Localization & Language Performance & SEO Accessibility & Compliance Automation & API Integration

Mega Menu with Dynamic Collections

Create a Shopify section for a mega menu that:

  • Displays up to 3 columns
  • Dynamically pulls collection links from the 'Catalog'
  • Supports featured images for each collection
  • Is fully responsive and keyboard accessible
Output Liquid, JSON-T schema, and CSS.

Sticky Header with Announcement Bar

Build a sticky header section that:

  • Remains at the top on scroll
  • Includes a dismissible announcement bar
  • Shows the store logo and main navigation links
  • Collapses into a hamburger menu on mobile
Provide Liquid, JSON-T schema, and CSS.

Multi-Level Dropdown Menu

Generate a navigation menu section for Shopify that:

  • Supports up to 3 menu levels (parent, child, grandchild)
  • Expands/collapses on hover (desktop) and tap (mobile)
  • Includes ARIA labels for accessibility
  • Allows merchants to customize menu items in the theme editor
Output Liquid, JSON-T schema, CSS, and JavaScript if needed.

Badge-Enabled Navigation

Create a header menu where:

  • Menu items can display custom badges (e.g., "New", "Sale")
  • Badges are configurable via metafields or theme settings
  • Badge color and text are customizable
Provide Liquid, JSON-T schema, and CSS.

Language Selector Dropdown

Build a language selector dropdown for the header that:

  • Automatically lists available store languages
  • Displays country flags or language codes
  • Highlights the current language
  • Switches language without page reload if possible
Provide Liquid, JSON-T schema, and CSS.

Mobile-First Hamburger Menu

Design a mobile navigation menu that:

  • Uses a hamburger icon to toggle open/close
  • Slides in from the left or right
  • Supports nested menu items
  • Includes smooth CSS transitions
Provide Liquid, JSON-T schema, CSS, and JavaScript if needed.

Cart Icon with Live Item Count

Create a header navigation section that:

  • Shows a cart icon with a live item count badge
  • Updates automatically as items are added/removed
  • Is accessible and mobile-friendly
Provide Liquid, JSON-T schema, and CSS.

Search Bar Integrated in Header

Generate a header section with:

  • An integrated search bar that expands on click or focus
  • Predictive search suggestions using Shopify's search API
  • Keyboard navigation support
Provide Liquid, JSON-T schema, CSS, and JavaScript.

Conditional Navigation Items

Build a navigation menu where:

  • Certain menu items only appear for logged-in customers or based on customer tags
  • Merchants can set visibility rules in theme settings
Provide Liquid, JSON-T schema, and CSS.

Announcement Bar with Countdown Timer

Create a top-of-page announcement bar that:

  • Includes a customizable countdown timer for sales or events
  • Allows merchants to edit the message and timer in the theme editor
  • Is dismissible and mobile-optimized
Provide Liquid, JSON-T schema, CSS, and JavaScript.

Accessibility-First Navigation

Design a navigation menu section that:

  • Is fully navigable by keyboard
  • Uses ARIA roles and labels for all interactive elements
  • Includes a "skip to content" link for screen readers
Provide Liquid, JSON-T schema, and CSS.

Floating Navigation Button

Create a floating navigation button that:

  • Stays visible in the bottom corner of the screen
  • Opens a menu with quick actions (e.g., Home, Shop, Cart)
  • Is touch-friendly and customizable
Provide Liquid, JSON-T schema, CSS, and JavaScript.

Seasonal Navigation Styling

Design a navigation menu that:

  • Changes color scheme or adds decorative elements based on the current season or holiday
  • Merchants can schedule styles in the theme editor
Provide Liquid, JSON-T schema, and CSS.

Breadcrumb Navigation

Generate a breadcrumb navigation section that:

  • Dynamically updates based on the current page/collection/product
  • Supports rich snippets for SEO
  • Is accessible and responsive
Provide Liquid, JSON-T schema, and CSS.

Social Media Icons in Header

Add a row of social media icons to the header navigation that:

  • Links to the store's social profiles
  • Allows merchants to choose which platforms to display
  • Supports custom icon uploads
Provide Liquid, JSON-T schema, and CSS.

Promo Link in Navigation

Create a navigation menu item that:

  • Highlights a specific promotion or sale (e.g., "Spring Sale!")
  • Uses a different color or animation to attract attention
  • Is editable via theme settings
Provide Liquid, JSON-T schema, and CSS.

User Account Dropdown

Design a user account menu in the header that:

  • Shows login/register links for guests
  • Shows account, orders, and logout for logged-in users
  • Includes an avatar or initials
Provide Liquid, JSON-T schema, and CSS.

Multi-Store Switcher

Build a store switcher in the navigation that:

  • Lets users switch between different regional stores or brands
  • Displays current store and available options
  • Updates links and currency accordingly
Provide Liquid, JSON-T schema, and CSS.

Animated Underline Navigation

Create a navigation menu with animated underline effects on hover and active states.

  • Merchants can customize underline color and thickness
  • Works on both desktop and mobile
Provide Liquid, JSON-T schema, and CSS.

Accessibility Statement Link

Add a persistent "Accessibility Statement" link to the navigation or footer, ensuring compliance with accessibility guidelines.

  • Merchants can edit the linked page in theme settings
Provide Liquid, JSON-T schema, and CSS.

One-Click Contact Button

Create a one-click contact button in the navigation that:

  • Opens a contact form modal or links to the contact page
  • Is always visible on mobile
Provide Liquid, JSON-T schema, and CSS.

How to Use:

  • Copy any prompt into Claude.AI 3.7
  • Add your branding or special requirements
  • Paste the generated code into your Shopify theme editor
  • Customize using the provided schema fields in Shopify's Theme Editor

Related Categories

Accessibility & Compliance Localization & Language Performance & SEO
Prompt copied to clipboard!