Tailwind CSS Navbar - React
Use our responsive Tailwind CSS navigation for your website. You can add links, icons, links with icons, search bars, and brand text.
See below our simple Navbar example that you can use in your Tailwind CSS and React project.
import { useState, useEffect } from "react";
import {
Navbar,
MobileNav,
Typography,
Button,
IconButton,
} from "@material-tailwind/react";
export default function Example() {
const [openNav, setOpenNav] = useState(false);
useEffect(() => {
window.addEventListener("resize", () => window.innerWidth >= 960 && setOpenNav(false));
}, []);
const navList = (
<ul className="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-normal"
>
<a href="#" className="flex items-center">
Pages
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-normal"
>
<a href="#" className="flex items-center">
Account
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-normal"
>
<a href="#" className="flex items-center">
Blocks
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-normal"
>
<a href="#" className="flex items-center">
Docs
</a>
</Typography>
</ul>
);
return (
<Navbar className="mx-auto max-w-screen-xl py-2 px-4 lg:px-8 lg:py-4">
<div className="container mx-auto flex items-center justify-between text-blue-gray-900">
<Typography
as="a"
href="#"
className="mr-4 cursor-pointer py-1.5 font-medium"
>
Material Tailwind
</Typography>
<div className="hidden lg:block">{navList}</div>
<Button variant="gradient" size="sm" className="hidden lg:inline-block">
<span>Buy Now</span>
</Button>
<IconButton
variant="text"
className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
ripple={false}
onClick={() => setOpenNav(!openNav)}
>
{openNav ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
className="h-6 w-6"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
)}
</IconButton>
</div>
<MobileNav open={openNav}>
<div className="container mx-auto">
{navList}
<Button variant="gradient" size="sm" fullWidth className="mb-2">
<span>Buy Now</span>
</Button>
</div>
</MobileNav>
</Navbar>
);
}Sticky Navbar
Use this example if you want your navbar to remain in a fixed position when scrolling. From the navbar, give access to the users to different sections/ web pages.
What is Material Tailwind
Can you help me out? you will get a lot of free exposure doing this can my website be in english?. There is too much white space do less with more, so that will be a conversation piece can you rework to make the pizza look more delicious other agencies charge much lesser can you make the blue bluer?. I think we need to start from scratch can my website be in english?, yet make it sexy i'll pay you in a week we don't need to pay upfront i hope you understand can you make it stand out more?. Make the font bigger can you help me out? you will get a lot of free exposure doing this that's going to be a chunk of change other agencies charge much lesser. Are you busy this weekend? I have a new project with a tight deadline that's going to be a chunk of change. There are more projects lined up charge extra the next time.
import React from "react";
import {
Navbar,
MobileNav,
Typography,
Button,
IconButton,
Card,
} from "@material-tailwind/react";
export default function Example() {
const [openNav, setOpenNav] = React.useState(false);
React.useEffect(() => {
window.addEventListener(
"resize",
() => window.innerWidth >= 960 && setOpenNav(false)
);
}, []);
const navList = (
<ul className="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-normal"
>
<a href="#" className="flex items-center">
Pages
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-normal"
>
<a href="#" className="flex items-center">
Account
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-normal"
>
<a href="#" className="flex items-center">
Blocks
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-normal"
>
<a href="#" className="flex items-center">
Docs
</a>
</Typography>
</ul>
);
return (
<>
<Navbar className="sticky inset-0 z-10 h-max max-w-full rounded-none py-2 px-4 lg:px-8 lg:py-4">
<div className="flex items-center justify-between text-blue-gray-900">
<Typography
as="a"
href="#"
className="mr-4 cursor-pointer py-1.5 font-medium"
>
Material Tailwind
</Typography>
<div className="flex items-center gap-4">
<div className="mr-4 hidden lg:block">{navList}</div>
<Button
variant="gradient"
size="sm"
className="hidden lg:inline-block"
>
<span>Buy Now</span>
</Button>
<IconButton
variant="text"
className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
ripple={false}
onClick={() => setOpenNav(!openNav)}
>
{openNav ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
className="h-6 w-6"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
)}
</IconButton>
</div>
</div>
<MobileNav open={openNav}>
{navList}
<Button variant="gradient" size="sm" fullWidth className="mb-2">
<span>Buy Now</span>
</Button>
</MobileNav>
</Navbar>
<div className="mx-auto max-w-screen-md py-12">
<Card className="mb-12 overflow-hidden">
<img
alt="nature"
className="h-[32rem] w-full object-cover object-center"
src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2717&q=80"
/>
</Card>
<Typography variant="h2" color="blue-gray" className="mb-2">
What is Material Tailwind
</Typography>
<Typography color="gray" className="font-normal">
Can you help me out? you will get a lot of free exposure doing this
can my website be in english?. There is too much white space do less
with more, so that will be a conversation piece can you rework to make
the pizza look more delicious other agencies charge much lesser can
you make the blue bluer?. I think we need to start from scratch can my
website be in english?, yet make it sexy i'll pay you in a week
we don't need to pay upfront i hope you understand can you make
it stand out more?. Make the font bigger can you help me out? you will
get a lot of free exposure doing this that's going to be a chunk
of change other agencies charge much lesser. Are you busy this
weekend? I have a new project with a tight deadline that's going
to be a chunk of change. There are more projects lined up charge extra
the next time.
</Typography>
</div>
</>
);
}Complex Navbar
If you want a more sophisticated navbar, use this example with icons and dropdown.
import React from "react";
import {
Navbar,
MobileNav,
Typography,
Button,
Menu,
MenuHandler,
MenuList,
MenuItem,
Avatar,
Card,
IconButton,
} from "@material-tailwind/react";
import {
CubeTransparentIcon,
UserCircleIcon,
CodeBracketSquareIcon,
Square3Stack3DIcon,
ChevronDownIcon,
Cog6ToothIcon,
InboxArrowDownIcon,
LifebuoyIcon,
PowerIcon,
RocketLaunchIcon,
Bars2Icon,
} from "@heroicons/react/24/outline";
// profile menu component
const profileMenuItems = [
{
label: "My Profile",
icon: UserCircleIcon,
},
{
label: "Edit Profile",
icon: Cog6ToothIcon,
},
{
label: "Inbox",
icon: InboxArrowDownIcon,
},
{
label: "Help",
icon: LifebuoyIcon,
},
{
label: "Sign Out",
icon: PowerIcon,
},
];
function ProfileMenu() {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
const closeMenu = () => setIsMenuOpen(false);
return (
<Menu open={isMenuOpen} handler={setIsMenuOpen} placement="bottom-end">
<MenuHandler>
<Button
variant="text"
color="blue-gray"
className="flex items-center gap-1 rounded-full py-0.5 pr-2 pl-0.5 lg:ml-auto"
>
<Avatar
variant="circular"
size="sm"
alt="candice wu"
className="border border-blue-500 p-0.5"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
/>
<ChevronDownIcon
strokeWidth={2.5}
className={`h-3 w-3 transition-transform ${
isMenuOpen ? "rotate-180" : ""
}`}
/>
</Button>
</MenuHandler>
<MenuList className="p-1">
{profileMenuItems.map(({ label, icon }, key) => {
const isLastItem = key === profileMenuItems.length - 1;
return (
<MenuItem
key={label}
onClick={closeMenu}
className={`flex items-center gap-2 rounded ${
isLastItem
? "hover:bg-red-500/10 focus:bg-red-500/10 active:bg-red-500/10"
: ""
}`}
>
{React.createElement(icon, {
className: `h-4 w-4 ${isLastItem ? "text-red-500" : ""}`,
strokeWidth: 2,
})}
<Typography
as="span"
variant="small"
className="font-normal"
color={isLastItem ? "red" : "inherit"}
>
{label}
</Typography>
</MenuItem>
);
})}
</MenuList>
</Menu>
);
}
// nav list menu
const navListMenuItems = [
{
title: "@material-tailwind/html",
description:
"Learn how to use @material-tailwind/html, packed with rich components and widgets.",
},
{
title: "@material-tailwind/react",
description:
"Learn how to use @material-tailwind/react, packed with rich components for React.",
},
{
title: "Material Tailwind PRO",
description:
"A complete set of UI Elements for building faster websites in less time.",
},
];
function NavListMenu() {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
const triggers = {
onMouseEnter: () => setIsMenuOpen(true),
onMouseLeave: () => setIsMenuOpen(false),
};
const renderItems = navListMenuItems.map(({ title, description }) => (
<a href="#" key={title}>
<MenuItem>
<Typography variant="h6" color="blue-gray" className="mb-1">
{title}
</Typography>
<Typography variant="small" color="gray" className="font-normal">
{description}
</Typography>
</MenuItem>
</a>
));
return (
<React.Fragment>
<Menu open={isMenuOpen} handler={setIsMenuOpen}>
<MenuHandler>
<Typography as="a" href="#" variant="small" className="font-normal">
<MenuItem
{...triggers}
className="hidden items-center gap-2 text-blue-gray-900 lg:flex lg:rounded-full"
>
<Square3Stack3DIcon className="h-[18px] w-[18px]" /> Pages{" "}
<ChevronDownIcon
strokeWidth={2}
className={`h-3 w-3 transition-transform ${
isMenuOpen ? "rotate-180" : ""
}`}
/>
</MenuItem>
</Typography>
</MenuHandler>
<MenuList
{...triggers}
className="hidden w-[36rem] grid-cols-7 gap-3 overflow-visible lg:grid"
>
<Card
color="blue"
shadow={false}
variant="gradient"
className="col-span-3 grid h-full w-full place-items-center rounded-md"
>
<RocketLaunchIcon strokeWidth={1} className="h-28 w-28" />
</Card>
<ul className="col-span-4 flex w-full flex-col gap-1">
{renderItems}
</ul>
</MenuList>
</Menu>
<MenuItem className="flex items-center gap-2 text-blue-gray-900 lg:hidden">
<Square3Stack3DIcon className="h-[18px] w-[18px]" /> Pages{" "}
</MenuItem>
<ul className="ml-6 flex w-full flex-col gap-1 lg:hidden">
{renderItems}
</ul>
</React.Fragment>
);
}
// nav list component
const navListItems = [
{
label: "Account",
icon: UserCircleIcon,
},
{
label: "Blocks",
icon: CubeTransparentIcon,
},
{
label: "Docs",
icon: CodeBracketSquareIcon,
},
];
function NavList() {
return (
<ul className="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center">
<NavListMenu />
{navListItems.map(({ label, icon }, key) => (
<Typography
key={label}
as="a"
href="#"
variant="small"
color="blue-gray"
className="font-normal"
>
<MenuItem className="flex items-center gap-2 lg:rounded-full">
{React.createElement(icon, { className: "h-[18px] w-[18px]" })}{" "}
{label}
</MenuItem>
</Typography>
))}
</ul>
);
}
export default function ComplexNavbar() {
const [isNavOpen, setIsNavOpen] = React.useState(false);
const toggleIsNavOpen = () => setIsNavOpen((cur) => !cur);
React.useEffect(() => {
window.addEventListener(
"resize",
() => window.innerWidth >= 960 && setIsNavOpen(false)
);
}, []);
return (
<Navbar className="mx-auto max-w-screen-xl p-2 lg:rounded-full lg:pl-6">
<div className="relative mx-auto flex items-center text-blue-gray-900">
<Typography
as="a"
href="#"
className="mr-4 ml-2 cursor-pointer py-1.5 font-medium"
>
Material Tailwind
</Typography>
<div className="absolute top-2/4 left-2/4 hidden -translate-x-2/4 -translate-y-2/4 lg:block">
<NavList />
</div>
<IconButton
size="sm"
color="blue-gray"
variant="text"
onClick={toggleIsNavOpen}
className="ml-auto mr-2 lg:hidden"
>
<Bars2Icon className="h-6 w-6" />
</IconButton>
<ProfileMenu />
</div>
<MobileNav open={isNavOpen} className="overflow-scroll">
<NavList />
</MobileNav>
</Navbar>
);
}Navbar With Search
import {
Navbar,
Typography,
IconButton,
Button,
Input,
} from "@material-tailwind/react";
import { BellIcon, Cog6ToothIcon } from "@heroicons/react/24/solid";
export default function Example() {
return (
<Navbar className="mx-auto max-w-screen-xl px-4 py-3">
<div className="flex flex-wrap items-center justify-between gap-y-4 text-blue-gray-900">
<Typography
as="a"
href="#"
variant="h6"
className="mr-4 ml-2 cursor-pointer py-1.5"
>
Material Tailwind
</Typography>
<div className="ml-auto flex gap-1 md:mr-4">
<IconButton variant="text" color="blue-gray">
<Cog6ToothIcon className="h-4 w-4" />
</IconButton>
<IconButton variant="text" color="blue-gray">
<BellIcon className="h-4 w-4" />
</IconButton>
</div>
<div className="relative flex w-full gap-2 md:w-max">
<Input
type="search"
label="Type here..."
className="pr-20"
containerProps={{
className: "min-w-[288px]",
}}
/>
<Button size="sm" className="!absolute right-1 top-1 rounded">
Search
</Button>
</div>
</div>
</Navbar>
);
}Dark Navbar
import {
Navbar,
Typography,
IconButton,
Button,
Input,
} from "@material-tailwind/react";
import { BellIcon, Cog6ToothIcon } from "@heroicons/react/24/solid";
export default function Example() {
return (
<Navbar
variant="gradient"
color="blue-gray"
className="mx-auto max-w-screen-xl from-blue-gray-900 to-blue-gray-800 px-4 py-3"
>
<div className="flex flex-wrap items-center justify-between gap-y-4 text-white">
<Typography
as="a"
href="#"
variant="h6"
className="mr-4 ml-2 cursor-pointer py-1.5"
>
Material Tailwind
</Typography>
<div className="ml-auto flex gap-1 md:mr-4">
<IconButton variant="text" color="white">
<Cog6ToothIcon className="h-4 w-4" />
</IconButton>
<IconButton variant="text" color="white">
<BellIcon className="h-4 w-4" />
</IconButton>
</div>
<div className="relative flex w-full gap-2 md:w-max">
<Input
type="search"
color="white"
label="Type here..."
className="pr-20"
containerProps={{
className: "min-w-[288px]",
}}
/>
<Button
size="sm"
color="white"
className="!absolute right-1 top-1 rounded"
>
Search
</Button>
</div>
</div>
</Navbar>
);
}Simple Navbar
import React from "react";
import {
Navbar,
Collapse,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
function NavList() {
return (
<ul className="my-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-medium"
>
<a href="#" className="flex items-center hover:text-blue-500 transition-colors">
Pages
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-medium"
>
<a href="#" className="flex items-center hover:text-blue-500 transition-colors">
Account
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-medium"
>
<a href="#" className="flex items-center hover:text-blue-500 transition-colors">
Blocks
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-medium"
>
<a href="#" className="flex items-center hover:text-blue-500 transition-colors">
Docs
</a>
</Typography>
</ul>
);
}
export default function Example() {
const [openNav, setOpenNav] = React.useState(false);
const handleWindowResize = () =>
window.innerWidth >= 960 && setOpenNav(false);
React.useEffect(() => {
window.addEventListener("resize", handleWindowResize);
return () => {
window.removeEventListener("resize", handleWindowResize);
};
}, []);
return (
<Navbar className="mx-auto max-w-screen-xl px-6 py-3">
<div className="flex items-center justify-between text-blue-gray-900">
<Typography
as="a"
href="#"
variant="h6"
className="mr-4 cursor-pointer py-1.5"
>
Material Tailwind
</Typography>
<div className="hidden lg:block">
<NavList />
</div>
<IconButton
variant="text"
className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
ripple={false}
onClick={() => setOpenNav(!openNav)}
>
{openNav ? (
<XMarkIcon className="h-6 w-6" strokeWidth={2} />
) : (
<Bars3Icon className="h-6 w-6" strokeWidth={2} />
)}
</IconButton>
</div>
<Collapse open={openNav}>
<NavList />
</Collapse>
</Navbar>
);
}Navbar With Mega Menu
import React from "react";
import {
Navbar,
Collapse,
Typography,
Button,
IconButton,
List,
ListItem,
Menu,
MenuHandler,
MenuList,
MenuItem,
Chip,
} from "@material-tailwind/react";
import {
ChevronDownIcon,
UserCircleIcon,
CubeTransparentIcon,
Bars3Icon,
XMarkIcon,
FlagIcon,
ChatBubbleOvalLeftIcon,
UsersIcon,
FolderIcon,
Square3Stack3DIcon,
RocketLaunchIcon,
FaceSmileIcon,
PuzzlePieceIcon,
GiftIcon,
} from "@heroicons/react/24/outline";
const colors = {
blue: "bg-blue-50 text-blue-500",
orange: "bg-orange-50 text-orange-500",
green: "bg-green-50 text-green-500",
"blue-gray": "bg-blue-gray-50 text-blue-gray-500",
purple: "bg-purple-50 text-purple-500",
teal: "bg-teal-50 text-teal-500",
cyan: "bg-cyan-50 text-cyan-500",
pink: "bg-pink-50 text-pink-500",
};
const navListMenuItems = [
{
color: "blue",
icon: FlagIcon,
title: "About us",
description: "Learn about our story and our mission statement.",
},
{
color: "orange",
icon: ChatBubbleOvalLeftIcon,
title: "Press",
description: "News and writings, press releases, and resources",
},
{
color: "green",
icon: UsersIcon,
title: (
<div className="flex items-center gap-1">
Careers{" "}
<Chip
size="sm"
color="green"
variant="ghost"
value="We're hiring!"
className="capitalize"
/>
</div>
),
description: "We are always looking for talented people. Join us!",
},
{
color: "blue-gray",
icon: FolderIcon,
title: "Legal",
description: "All the stuff that we dan from legal made us add.",
},
{
color: "purple",
icon: RocketLaunchIcon,
title: "Products",
description: "Checkout our products that helps a startup running.",
},
{
color: "teal",
icon: FaceSmileIcon,
title: "Icons",
description: "Set of beautiful icons that you can use in your project.",
},
{
color: "cyan",
icon: PuzzlePieceIcon,
title: "UI Kits",
description: "High quality UI Kits helps you to 2x faster.",
},
{
color: "pink",
icon: GiftIcon,
title: "Open Source",
description: "List of all our open-source projects, it's all free.",
},
];
function NavListMenu() {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
const renderItems = navListMenuItems.map(
({ icon, title, description, color }, key) => (
<a href="#" key={key}>
<MenuItem className="flex items-center gap-3 rounded-lg">
<div className={`rounded-lg p-5 ${colors[color]}`}>
{React.createElement(icon, {
strokeWidth: 2,
className: "h-6 w-6",
})}
</div>
<div>
<Typography
variant="h6"
color="blue-gray"
className="flex items-center text-sm"
>
{title}
</Typography>
<Typography variant="small" color="gray" className="font-normal">
{description}
</Typography>
</div>
</MenuItem>
</a>
)
);
return (
<React.Fragment>
<Menu
open={isMenuOpen}
handler={setIsMenuOpen}
offset={{ mainAxis: 20 }}
placement="bottom"
allowHover={true}
>
<MenuHandler>
<Typography as="div" variant="small" className="font-normal">
<ListItem
className="flex items-center gap-2 py-2 pr-4"
selected={isMenuOpen || isMobileMenuOpen}
onClick={() => setIsMobileMenuOpen((cur) => !cur)}
>
<Square3Stack3DIcon className="h-[18px] w-[18px]" />
Resources
<ChevronDownIcon
strokeWidth={2.5}
className={`hidden h-3 w-3 transition-transform lg:block ${
isMenuOpen ? "rotate-180" : ""
}`}
/>
<ChevronDownIcon
strokeWidth={2.5}
className={`block h-3 w-3 transition-transform lg:hidden ${
isMobileMenuOpen ? "rotate-180" : ""
}`}
/>
</ListItem>
</Typography>
</MenuHandler>
<MenuList className="hidden max-w-screen-xl rounded-xl lg:block">
<ul className="grid grid-cols-4 gap-y-2">{renderItems}</ul>
</MenuList>
</Menu>
<div className="block lg:hidden">
<Collapse open={isMobileMenuOpen}>{renderItems}</Collapse>
</div>
</React.Fragment>
);
}
function NavList() {
return (
<List className="mt-4 mb-6 p-0 lg:mt-0 lg:mb-0 lg:flex-row lg:p-1">
<Typography
as="a"
href="#"
variant="small"
color="blue-gray"
className="font-normal"
>
<ListItem className="flex items-center gap-2 py-2 pr-4">
<CubeTransparentIcon className="h-[18px] w-[18px]" />
Blocks
</ListItem>
</Typography>
<NavListMenu />
<Typography
as="a"
href="#"
variant="small"
color="blue-gray"
className="font-normal"
>
<ListItem className="flex items-center gap-2 py-2 pr-4">
<UserCircleIcon className="h-[18px] w-[18px]" />
Account
</ListItem>
</Typography>
</List>
);
}
export default function Example() {
const [openNav, setOpenNav] = React.useState(false);
React.useEffect(() => {
window.addEventListener(
"resize",
() => window.innerWidth >= 960 && setOpenNav(false)
);
}, []);
return (
<Navbar className="mx-auto max-w-screen-xl px-4 py-2">
<div className="flex items-center justify-between text-blue-gray-900">
<Typography
as="a"
href="#"
variant="h6"
className="mr-4 cursor-pointer py-1.5 lg:ml-2"
>
Material Tailwind
</Typography>
<div className="hidden lg:block">
<NavList />
</div>
<div className="hidden gap-2 lg:flex">
<Button variant="text" size="sm" color="blue-gray">
Sign In
</Button>
<Button variant="gradient" size="sm">
Sign Up
</Button>
</div>
<IconButton
variant="text"
color="blue-gray"
className="lg:hidden"
onClick={() => setOpenNav(!openNav)}
>
{openNav ? (
<XMarkIcon className="h-6 w-6" strokeWidth={2} />
) : (
<Bars3Icon className="h-6 w-6" strokeWidth={2} />
)}
</IconButton>
</div>
<Collapse open={openNav}>
<NavList />
<div className="flex w-full flex-nowrap items-center gap-2 lg:hidden">
<Button variant="outlined" size="sm" color="blue-gray" fullWidth>
Sign In
</Button>
<Button variant="gradient" size="sm" fullWidth>
Sign Up
</Button>
</div>
</Collapse>
</Navbar>
);
}