Menus
Full Width
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from 'react'
import { Popover, Transition } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/solid'
import {
ChartBarIcon,
CheckCircleIcon,
CursorClickIcon,
PhoneIcon,
PlayIcon,
ShieldCheckIcon,
ViewGridIcon,
} from '@heroicons/react/outline'
const solutions = [
{
name: 'Analytics',
description: 'Get a better understanding of where your traffic is coming from.',
href: '#',
icon: ChartBarIcon,
},
{
name: 'Engagement',
description: 'Speak directly to your customers in a more meaningful way.',
href: '#',
icon: CursorClickIcon,
},
{ name: 'Security', description: "Your customers' data will be safe and secure.", href: '#', icon: ShieldCheckIcon },
{
name: 'Integrations',
description: "Connect with third-party tools that you're already using.",
href: '#',
icon: ViewGridIcon,
},
]
const callsToAction = [
{ name: 'Watch Demo', href: '#', icon: PlayIcon },
{ name: 'View All Products', href: '#', icon: CheckCircleIcon },
{ name: 'Contact Sales', href: '#', icon: PhoneIcon },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
return (
<Popover className="z-0 relative">
{({ open }) => (
<>
<div className="relative z-10 bg-white shadow">
<div className="max-w-7xl mx-auto flex px-4 py-6 sm:px-6 lg:px-8">
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span>Solutions</span>
<ChevronDownIcon
className={classNames(
open ? 'text-gray-600' : 'text-gray-400',
'ml-2 h-5 w-5 group-hover:text-gray-500'
)}
aria-hidden="true"
/>
</Popover.Button>
</div>
</div>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 -translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-1"
>
<Popover.Panel static className="absolute z-10 inset-x-0 transform shadow-lg">
<div className="bg-white">
<div className="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"
>
<div className="flex md:h-full lg:flex-col">
<div className="flex-shrink-0">
<div className="inline-flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<item.icon className="h-6 w-6" aria-hidden="true" />
</div>
</div>
<div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</div>
<p className="mt-2 text-sm font-medium text-blue-600 lg:mt-4">
Learn more <span aria-hidden="true">→</span>
</p>
</div>
</div>
</a>
))}
</div>
</div>
<div className="bg-gray-50">
<div className="max-w-7xl mx-auto space-y-6 px-4 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-6 lg:px-8">
{callsToAction.map((item) => (
<div key={item.name} className="flow-root">
<a
href={item.href}
className="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
<span className="ml-3">{item.name}</span>
</a>
</div>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
)
}
Full Width Two Columns
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from 'react'
import { Popover, Transition } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/solid'
import {
BookmarkAltIcon,
BriefcaseIcon,
DesktopComputerIcon,
GlobeAltIcon,
InformationCircleIcon,
NewspaperIcon,
OfficeBuildingIcon,
ShieldCheckIcon,
UserGroupIcon,
} from '@heroicons/react/outline'
const company = [
{ name: 'About', href: '#', icon: InformationCircleIcon },
{ name: 'Customers', href: '#', icon: OfficeBuildingIcon },
{ name: 'Press', href: '#', icon: NewspaperIcon },
{ name: 'Careers', href: '#', icon: BriefcaseIcon },
{ name: 'Privacy', href: '#', icon: ShieldCheckIcon },
]
const resources = [
{ name: 'Community', href: '#', icon: UserGroupIcon },
{ name: 'Partners', href: '#', icon: GlobeAltIcon },
{ name: 'Guides', href: '#', icon: BookmarkAltIcon },
{ name: 'Webinars', href: '#', icon: DesktopComputerIcon },
]
const blogPosts = [
{
id: 1,
name: 'Boost your conversion rate',
href: '#',
preview: 'Eget ullamcorper ac ut vulputate fames nec mattis pellentesque elementum. Viverra tempor id mus.',
imageUrl:
'https://images.unsplash.com/photo-1558478551-1a378f63328e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2849&q=80',
},
{
id: 2,
name: 'How to use search engine optimization to drive traffic to your site',
href: '#',
preview: 'Eget ullamcorper ac ut vulputate fames nec mattis pellentesque elementum. Viverra tempor id mus.',
imageUrl:
'https://images.unsplash.com/1/apple-gear-looking-pretty.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80',
},
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
return (
<Popover className="z-0 relative">
{({ open }) => (
<>
<div className="relative z-10 bg-white shadow">
<div className="max-w-7xl mx-auto flex px-4 py-6 sm:px-6 lg:px-8">
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span>Solutions</span>
<ChevronDownIcon
className={classNames(
open ? 'text-gray-600' : 'text-gray-400',
'ml-2 h-5 w-5 group-hover:text-gray-500'
)}
aria-hidden="true"
/>
</Popover.Button>
</div>
</div>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 -translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-1"
>
<Popover.Panel static className="absolute z-10 inset-x-0 transform shadow-lg">
<div className="absolute inset-0 flex" aria-hidden="true">
<div className="bg-white w-1/2" />
<div className="bg-gray-50 w-1/2" />
</div>
<div className="relative max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2">
<nav
className="grid gap-y-10 px-4 py-8 bg-white sm:grid-cols-2 sm:gap-x-8 sm:py-12 sm:px-6 lg:px-8 xl:pr-12"
aria-labelledby="solutions-heading"
>
<h2 id="solutions-heading" className="sr-only">
Solutions menu
</h2>
<div>
<h3 className="text-sm font-medium tracking-wide text-gray-500 uppercase">Company</h3>
<ul className="mt-5 space-y-6">
{company.map((item) => (
<li key={item.name} className="flow-root">
<a
href={item.href}
className="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
<span className="ml-4">{item.name}</span>
</a>
</li>
))}
</ul>
</div>
<div>
<h3 className="text-sm font-medium tracking-wide text-gray-500 uppercase">Resources</h3>
<ul className="mt-5 space-y-6">
{resources.map((item) => (
<li key={item.name} className="flow-root">
<a
href={item.href}
className="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
<span className="ml-4">{item.name}</span>
</a>
</li>
))}
</ul>
</div>
</nav>
<div className="bg-gray-50 px-4 py-8 sm:py-12 sm:px-6 lg:px-8 xl:pl-12">
<div>
<h3 className="text-sm font-medium tracking-wide text-gray-500 uppercase">From the blog</h3>
<ul className="mt-6 space-y-6">
{blogPosts.map((post) => (
<li key={post.id} className="flow-root">
<a
href={post.href}
className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 transition ease-in-out duration-150"
>
<div className="hidden sm:block flex-shrink-0">
<img className="w-32 h-20 object-cover rounded-md" src={post.imageUrl} alt="" />
</div>
<div className="min-w-0 flex-1 sm:ml-8">
<h4 className="text-base font-medium text-gray-900 truncate">{post.name}</h4>
<p className="mt-1 text-sm text-gray-500">{post.preview}</p>
</div>
</a>
</li>
))}
</ul>
</div>
<div className="mt-6 text-sm font-medium">
<a href="#" className="text-blue-600 hover:text-blue-500 transition ease-in-out duration-150">
View all posts <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
)
}
Stacked With Footer Actions
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from 'react'
import { Popover, Transition } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/solid'
import {
ChartBarIcon,
CursorClickIcon,
PhoneIcon,
PlayIcon,
RefreshIcon,
ShieldCheckIcon,
ViewGridIcon,
} from '@heroicons/react/outline'
const solutions = [
{
name: 'Analytics',
description: 'Get a better understanding of where your traffic is coming from.',
href: '#',
icon: ChartBarIcon,
},
{
name: 'Engagement',
description: 'Speak directly to your customers in a more meaningful way.',
href: '#',
icon: CursorClickIcon,
},
{ name: 'Security', description: "Your customers' data will be safe and secure.", href: '#', icon: ShieldCheckIcon },
{
name: 'Integrations',
description: "Connect with third-party tools that you're already using.",
href: '#',
icon: ViewGridIcon,
},
{
name: 'Automations',
description: 'Build strategic funnels that will drive your customers to convert',
href: '#',
icon: RefreshIcon,
},
]
const callsToAction = [
{ name: 'Watch Demo', href: '#', icon: PlayIcon },
{ name: 'Contact Sales', href: '#', icon: PhoneIcon },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
return (
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span>Solutions</span>
<ChevronDownIcon
className={classNames(open ? 'text-gray-600' : 'text-gray-400', 'ml-2 h-5 w-5 group-hover:text-gray-500')}
aria-hidden="true"
/>
</Popover.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel
static
className="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" />
<div className="ml-4">
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</div>
</a>
))}
</div>
<div className="px-5 py-5 bg-gray-50 space-y-6 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8">
{callsToAction.map((item) => (
<div key={item.name} className="flow-root">
<a
href={item.href}
className="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
<span className="ml-3">{item.name}</span>
</a>
</div>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
)
}
Stacked With Footer List
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from 'react'
import { Popover, Transition } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/solid'
import { BookmarkAltIcon, CalendarIcon, ShieldCheckIcon, SupportIcon } from '@heroicons/react/outline'
const resources = [
{
name: 'Help Center',
description: 'Get all of your questions answered in our forums or contact support.',
href: '#',
icon: SupportIcon,
},
{
name: 'Guides',
description: 'Learn how to maximize our platform to get the most out of it.',
href: '#',
icon: BookmarkAltIcon,
},
{
name: 'Events',
description: 'See what meet-ups and other events we might be planning near you.',
href: '#',
icon: CalendarIcon,
},
{ name: 'Security', description: 'Understand how we take your privacy seriously.', href: '#', icon: ShieldCheckIcon },
]
const recentPosts = [
{ id: 1, name: 'Boost your conversion rate', href: '#' },
{ id: 2, name: 'How to use search engine optimization to drive traffic to your site', href: '#' },
{ id: 3, name: 'Improve your customer experience', href: '#' },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
return (
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span>Resources</span>
<ChevronDownIcon
className={classNames(open ? 'text-gray-600' : 'text-gray-400', 'ml-2 h-5 w-5 group-hover:text-gray-500')}
aria-hidden="true"
/>
</Popover.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel
static
className="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
{resources.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" />
<div className="ml-4">
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</div>
</a>
))}
</div>
<div className="px-5 py-5 bg-gray-50 sm:px-8 sm:py-8">
<div>
<h3 className="text-sm tracking-wide font-medium text-gray-500 uppercase">Recent Posts</h3>
<ul className="mt-4 space-y-4">
{recentPosts.map((post) => (
<li key={post.id} className="text-base truncate">
<a
href={post.href}
className="font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150"
>
{post.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-5 text-sm">
<a
href="#"
className="font-medium text-blue-600 hover:text-blue-500 transition ease-in-out duration-150"
>
{' '}
View all posts <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
)
}
Two Column With Solid Icons
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from 'react'
import { Popover, Transition } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/solid'
import {
ChartBarIcon,
CursorClickIcon,
DocumentReportIcon,
RefreshIcon,
ShieldCheckIcon,
ViewGridIcon,
} from '@heroicons/react/outline'
const solutions = [
{
name: 'Analytics',
description: 'Get a better understanding of where your traffic is coming from.',
href: '#',
icon: ChartBarIcon,
},
{
name: 'Engagement',
description: 'Speak directly to your customers in a more meaningful way.',
href: '#',
icon: CursorClickIcon,
},
{ name: 'Security', description: "Your customers' data will be safe and secure.", href: '#', icon: ShieldCheckIcon },
{
name: 'Integrations',
description: "Connect with third-party tools that you're already using.",
href: '#',
icon: ViewGridIcon,
},
{
name: 'Automations',
description: 'Build strategic funnels that will drive your customers to convert',
href: '#',
icon: RefreshIcon,
},
{
name: 'Reports',
description: 'Get detailed reports that will help you make more informed decisions',
href: '#',
icon: DocumentReportIcon,
},
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
return (
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span>Solutions</span>
<ChevronDownIcon
className={classNames(
open ? 'text-gray-600' : 'text-gray-400',
'ml-2 h-5 w-5 group-hover:text-gray-500 transition ease-in-out duration-150'
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel
static
className="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0 lg:max-w-3xl"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"
>
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<item.icon className="h-6 w-6" aria-hidden="true" />
</div>
<div className="ml-4">
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</div>
</a>
))}
</div>
<div className="p-5 bg-gray-50 sm:p-8">
<a
href="#"
className="-m-3 p-3 flow-root rounded-md hover:bg-gray-100 transition ease-in-out duration-150"
>
<span className="flex items-center">
<span className="text-base font-medium text-gray-900">Enterprise</span>
<span className="ml-3 inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-blue-100 text-blue-800">
New
</span>
</span>
<span className="mt-1 block text-sm text-gray-500">
Empower your entire team with even more advanced tools.
</span>
</a>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
)
}
Simple
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from 'react'
import { Popover, Transition } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/solid'
const solutions = [
{ name: 'Blog', description: 'Learn about tips, product updates and company culture.', href: '#' },
{
name: 'Help Center',
description: 'Get all of your questions answered in our forums of contact support.',
href: '#',
},
{ name: 'Guides', description: 'Learn how to maximize our platform to get the most out of it.', href: '#' },
{ name: 'Events', description: 'Check out webinars with experts and learn about our annual conference.', href: '#' },
{ name: 'Security', description: 'Understand how we take your privacy seriously.', href: '#' },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
return (
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span>Solutions</span>
<ChevronDownIcon
className={classNames(open ? 'text-gray-600' : 'text-gray-400', 'ml-2 h-5 w-5 group-hover:text-gray-500')}
aria-hidden="true"
/>
</Popover.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel
static
className="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150"
>
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</a>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
)
}