Navigation
The storefront navigation system - navbar, quick links, mobile bottom bar, and responsive layout.
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 and optionally add a megamenu component.
Navbar
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. Hidden on mobile (md:flex). The enable-shopify-menus skill replaces these with items from a Shopify Navigation menu.
Mobile menu
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.
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, visible below the md breakpoint. It contains:
- Search button - expands an animated search input
- Agent button - optional slot, rendered when enabled
Transitions between states use Framer Motion for smooth animation. The enable-shopify-menus skill can add a Browse button that toggles a megamenu.
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 icon remains in the top bar. Search and agent buttons live in the fixed bottom bar.
Key files
| File | Purpose |
|---|---|
components/layout/nav/index.tsx | Main navbar composition |
components/layout/nav/mobile-menu.tsx | Hamburger menu with left sheet (mobile) |
components/layout/nav/quick-links.tsx | Quick links (hardcoded by default) |
components/layout/nav/cart.tsx | Cart icon server component |
components/layout/nav/cart-client.tsx | Cart icon with quantity badge |
components/layout/footer.tsx | Footer (copyright only by default) |
components/layout/bottom-bar.tsx | Mobile bottom bar with search |