Navigation

The navigation system is split into a sticky top navbar for desktop and a fixed bottom bar for mobile. By default, navigation links are hardcoded. Use /vercel-shop:enable-shopify-menus to fetch menus from Shopify.

A sticky header (z-30) that composes the logo/brand link, quick links, and the cart icon. On mobile, a hamburger menu appears to the left of the logo and the quick links are hidden.

Quick links

A horizontal link bar with hardcoded defaults: Shop and About. The component already accepts a Shopify-shaped MenuItem[] and renders up to three levels via an inline hover panel; the enable-shopify-menus skill swaps the data source over to a Shopify Navigation menu. Hidden on mobile (md:flex).

A hamburger icon to the left of the logo, visible below the md breakpoint. Tapping it opens a Sheet sliding in from the left with the same navigation links as the desktop quick links. The sheet closes automatically when a link is tapped. By default the mobile sheet leaves breathing room below the close button and renders each link as a padded touch target instead of plain text rows. The same hardcoded links are used by default; the enable-shopify-menus skill can replace them with Shopify-powered menus.

Search

A search icon in the navbar opens a centered modal dialog. The modal contains a search input with predictive results powered by Shopify's predictiveSearch API. When the user types, suggestion chips and matching products appear below the input. Clicking a product navigates to its page; a "View all" button navigates to the full search results page. The modal closes on navigation, Escape, or clicking outside.

Cart icon

The cart icon is a server/client component pair. The server component reads the shopify_cartId cookie and fetches the initial cart. The client component renders a quantity badge with an animation for pending additions and opens the cart overlay on click.

Footer

By default the footer renders only a copyright notice. The enable-shopify-menus skill adds Shopify-powered footer columns with headings and links.

Mobile bottom bar

A fixed bar at the bottom of the viewport. It renders only when it has children (e.g. the optional agent button).

Responsive behavior

Desktop (md and up) - full horizontal navbar with quick links and cart sheet.

Mobile (below md) - hamburger menu to the left of the logo opens a left-sliding sheet with navigation links. The cart and search icons remain in the top bar. The agent button (when enabled) lives in the fixed bottom bar.

Key files

File	Purpose
`components/nav/index.tsx`	Navbar composition
`components/nav/mobile-menu.tsx`	Mobile hamburger sheet
`components/nav/search-modal.tsx`	Search icon and predictive-search modal
`components/action-bar/index.tsx`	Fixed bottom bar (agent button slot)

quick-links, cart / cart-client, and the footer components sit in their respective directories; the footer page covers footer composition.