ecommerce / components / store-navigation
With Double Column And Persistent Mobile Nav
05-with-double-column-and-persistent-mobile-nav.jsx
import { Popover, PopoverButton, PopoverGroup, PopoverPanel } from '@headlessui/react'
import { MagnifyingGlassIcon, ShoppingBagIcon } from '@heroicons/react/24/outline'
const navigation = {
categories: [
{
name: 'Women',
clothing: [
[
{ name: 'Tops', href: '#' },
{ name: 'Dresses', href: '#' },
{ name: 'Pants', href: '#' },
{ name: 'Denim', href: '#' },
{ name: 'Sweaters', href: '#' },
{ name: 'T-Shirts', href: '#' },
],
[
{ name: 'Jackets', href: '#' },
{ name: 'Activewear', href: '#' },
{ name: 'Shorts', href: '#' },
{ name: 'Swimwear', href: '#' },
{ name: 'Browse All', href: '#' },
],
],
accessories: [
{ name: 'Shoes', href: '#' },
{ name: 'Jewelry', href: '#' },
{ name: 'Handbags', href: '#' },
{ name: 'Socks', href: '#' },
{ name: 'Hats', href: '#' },
{ name: 'Browse All', href: '#' },
],
categories: [
{ name: 'New Arrivals', href: '#' },
{ name: 'Sale', href: '#' },
{ name: 'Basic Tees', href: '#' },
{ name: 'Artwork Tees', href: '#' },
],
},
{
name: 'Men',
clothing: [
[
{ name: 'Dress Shirts', href: '#' },
{ name: 'Pants', href: '#' },
{ name: 'Jackets', href: '#' },
{ name: 'T-Shirts', href: '#' },
{ name: 'Jeans', href: '#' },
{ name: 'Hoodies', href: '#' },
],
[
{ name: 'Vests', href: '#' },
{ name: 'Kilts', href: '#' },
{ name: 'Outdoors', href: '#' },
{ name: 'Capes', href: '#' },
{ name: 'Browse All', href: '#' },
],
],
accessories: [
{ name: 'Watches', href: '#' },
{ name: 'Boots', href: '#' },
{ name: 'Fanny Packs', href: '#' },
{ name: 'Sunglasses', href: '#' },
{ name: 'Browse All', href: '#' },
],
categories: [
{ name: 'Just Added', href: '#' },
{ name: 'Clearance', href: '#' },
{ name: 'Graphic Tees', href: '#' },
],
},
],
pages: [
{ name: 'Company', href: '#' },
{ name: 'Stores', href: '#' },
],
}
export default function Example() {
return (
<div className="bg-white">
<header className="relative bg-white">
<nav aria-label="Top" className="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="border-b border-gray-200 px-4 pb-14 sm:px-0 sm:pb-0">
<div className="flex h-16 items-center justify-between">
{/* Logo */}
<div className="flex flex-1">
<a href="#">
<span className="sr-only">Your Company</span>
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
className="h-8 w-auto"
/>
</a>
</div>
{/* Flyout menus */}
<PopoverGroup className="absolute inset-x-0 bottom-0 sm:static sm:flex-1 sm:self-stretch">
<div className="flex h-14 space-x-8 overflow-x-auto border-t border-gray-200 px-4 pb-px sm:h-full sm:justify-center sm:overflow-visible sm:border-t-0 sm:pb-0">
{navigation.categories.map((category) => (
<Popover key={category.name} className="flex">
<div className="relative flex">
<PopoverButton className="group relative flex items-center justify-center text-sm font-medium text-gray-700 transition-colors duration-200 ease-out hover:text-gray-800 data-open:text-indigo-600">
{category.name}
<span
aria-hidden="true"
className="absolute inset-x-0 -bottom-px z-30 h-0.5 transition duration-200 ease-out group-data-open:bg-indigo-600"
/>
</PopoverButton>
</div>
<PopoverPanel
transition
className="absolute inset-x-0 top-full z-20 w-full bg-white text-gray-500 transition data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in sm:text-sm"
>
{/* Presentational element used to render the bottom shadow, if we put the shadow on the actual panel it pokes out the top, so we use this shorter element to hide the top of the shadow */}
<div aria-hidden="true" className="absolute inset-0 top-1/2 bg-white shadow-sm" />
<div className="relative bg-white">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 items-start gap-x-6 gap-y-10 pt-10 pb-12 md:grid-cols-2 lg:gap-x-8">
<div className="grid grid-cols-1 gap-x-6 gap-y-10 lg:gap-x-8">
<div>
<p id="clothing-heading" className="font-medium text-gray-900">
Clothing
</p>
<div className="mt-4 border-t border-gray-200 pt-6 sm:grid sm:grid-cols-2 sm:gap-x-6">
<ul
role="list"
aria-labelledby="clothing-heading"
className="space-y-6 sm:space-y-4"
>
{category.clothing[0].map((item) => (
<li key={item.name} className="flex">
<a href={item.href} className="hover:text-gray-800">
{item.name}
</a>
</li>
))}
</ul>
<ul
role="list"
aria-label="More clothing"
className="mt-6 space-y-6 sm:mt-0 sm:space-y-4"
>
{category.clothing[1].map((item) => (
<li key={item.name} className="flex">
<a href={item.href} className="hover:text-gray-800">
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
<div className="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:gap-x-8">
<div>
<p id="accessories-heading" className="font-medium text-gray-900">
Accessories
</p>
<ul
role="list"
aria-labelledby="accessories-heading"
className="mt-4 space-y-6 border-t border-gray-200 pt-6 sm:space-y-4"
>
{category.accessories.map((item) => (
<li key={item.name} className="flex">
<a href={item.href} className="hover:text-gray-800">
{item.name}
</a>
</li>
))}
</ul>
</div>
<div>
<p id="categories-heading" className="font-medium text-gray-900">
Categories
</p>
<ul
role="list"
aria-labelledby="categories-heading"
className="mt-4 space-y-6 border-t border-gray-200 pt-6 sm:space-y-4"
>
{category.categories.map((item) => (
<li key={item.name} className="flex">
<a href={item.href} className="hover:text-gray-800">
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
</div>
</PopoverPanel>
</Popover>
))}
{navigation.pages.map((page) => (
<a
key={page.name}
href={page.href}
className="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800"
>
{page.name}
</a>
))}
</div>
</PopoverGroup>
<div className="flex flex-1 items-center justify-end">
{/* Search */}
<a href="#" className="p-2 text-gray-400 hover:text-gray-500">
<span className="sr-only">Search</span>
<MagnifyingGlassIcon aria-hidden="true" className="size-6" />
</a>
{/* Cart */}
<div className="ml-4 flow-root lg:ml-8">
<a href="#" className="group -m-2 flex items-center p-2">
<ShoppingBagIcon
aria-hidden="true"
className="size-6 shrink-0 text-gray-400 group-hover:text-gray-500"
/>
<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
<span className="sr-only">items in cart, view bag</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
</div>
)
}