Create a Dropdown Menu Using Next.js & Headless UI

Part 6: Using the Next.js Link component.

Photo by Christopher Gower on UnsplashPhoto by Christopher Gower on Unsplash

Under the components folder, create MyLink.js

import Link from "next/link";

import React from "react";

const MyLink = (props) => {
  let { href, children, active, } = props;

  return (
    <Link href={href}>
        className={`${active && "bg-blue-500"} w-full rounded-md p-2`}

export default MyLink;

Actually, the content inside the Link component is copied from the MyDropdown.js except for which changed to children

{ => (
    <Menu.Item disabled={item.disabled} key={}>
      {({ active }) => (
        <MyLink href={`${}`} active={active}>

Then create the pages like account.js, info.js, register.js

A sample page is just like the following:

import React from "react";

const account = () => {
  return <div>account</div>;

export default account;

Remove the MyDropdown component from index.js.

export default function Home() {
  return <div>Home</div>;

Go to Layout.js, import the MyDropdown and add the blue background and h-screen class to the div.

import React from "react";

import MyDropdown from "./MyDropdown";

const Layout = ({ children }) => {
  return (
    <div className="bg-blue-100 h-screen">
      <MyDropdown />

export default Layout;

Continue Learning