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.
Examples on this page are using @heroicons/react make sure you have installed it.
npm i @heroicons/reactSimple Navbar with Icons
Use this minimalistic navbar which includes the brand name on the left, followed by a horizontal list of navigation links - each accompanied by an icon. The navbar also includes call-to-action buttons, with the "SIGN IN" button highlighted in black to draw attention.
import React from "react";
import {
Navbar,
MobileNav,
Typography,
Button,
IconButton,
} from "@material-tailwind/react";
export function NavbarDefault() {
const [openNav, setOpenNav] = React.useState(false);
React.useEffect(() => {
window.addEventListener(
"resize",
() => window.innerWidth >= 960 && setOpenNav(false),
);
}, []);
const navList = (
<ul className="mt-2 mb-4 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="flex items-center gap-x-2 p-1 font-medium"
>
<svg
width="16"
height="15"
viewBox="0 0 16 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 0.5C4.73478 0.5 4.48043 0.605357 4.29289 0.792893C4.10536 0.98043 4 1.23478 4 1.5C4 1.76522 4.10536 2.01957 4.29289 2.20711C4.48043 2.39464 4.73478 2.5 5 2.5H11C11.2652 2.5 11.5196 2.39464 11.7071 2.20711C11.8946 2.01957 12 1.76522 12 1.5C12 1.23478 11.8946 0.98043 11.7071 0.792893C11.5196 0.605357 11.2652 0.5 11 0.5H5ZM2 4.5C2 4.23478 2.10536 3.98043 2.29289 3.79289C2.48043 3.60536 2.73478 3.5 3 3.5H13C13.2652 3.5 13.5196 3.60536 13.7071 3.79289C13.8946 3.98043 14 4.23478 14 4.5C14 4.76522 13.8946 5.01957 13.7071 5.20711C13.5196 5.39464 13.2652 5.5 13 5.5H3C2.73478 5.5 2.48043 5.39464 2.29289 5.20711C2.10536 5.01957 2 4.76522 2 4.5ZM0 8.5C0 7.96957 0.210714 7.46086 0.585786 7.08579C0.960859 6.71071 1.46957 6.5 2 6.5H14C14.5304 6.5 15.0391 6.71071 15.4142 7.08579C15.7893 7.46086 16 7.96957 16 8.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V8.5Z"
fill="#90A4AE"
/>
</svg>
<a href="#" className="flex items-center">
Pages
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="flex items-center gap-x-2 p-1 font-medium"
>
<svg
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16 8.5C16 10.6217 15.1571 12.6566 13.6569 14.1569C12.1566 15.6571 10.1217 16.5 8 16.5C5.87827 16.5 3.84344 15.6571 2.34315 14.1569C0.842855 12.6566 0 10.6217 0 8.5C0 6.37827 0.842855 4.34344 2.34315 2.84315C3.84344 1.34285 5.87827 0.5 8 0.5C10.1217 0.5 12.1566 1.34285 13.6569 2.84315C15.1571 4.34344 16 6.37827 16 8.5ZM10 5.5C10 6.03043 9.78929 6.53914 9.41421 6.91421C9.03914 7.28929 8.53043 7.5 8 7.5C7.46957 7.5 6.96086 7.28929 6.58579 6.91421C6.21071 6.53914 6 6.03043 6 5.5C6 4.96957 6.21071 4.46086 6.58579 4.08579C6.96086 3.71071 7.46957 3.5 8 3.5C8.53043 3.5 9.03914 3.71071 9.41421 4.08579C9.78929 4.46086 10 4.96957 10 5.5ZM8 9.5C7.0426 9.49981 6.10528 9.77449 5.29942 10.2914C4.49356 10.8083 3.85304 11.5457 3.454 12.416C4.01668 13.0706 4.71427 13.5958 5.49894 13.9555C6.28362 14.3152 7.13681 14.5009 8 14.5C8.86319 14.5009 9.71638 14.3152 10.5011 13.9555C11.2857 13.5958 11.9833 13.0706 12.546 12.416C12.147 11.5457 11.5064 10.8083 10.7006 10.2914C9.89472 9.77449 8.9574 9.49981 8 9.5Z"
fill="#90A4AE"
/>
</svg>
<a href="#" className="flex items-center">
Account
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="flex items-center gap-x-2 p-1 font-medium"
>
<svg
width="14"
height="15"
viewBox="0 0 14 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 0.5C1.46957 0.5 0.960859 0.710714 0.585786 1.08579C0.210714 1.46086 0 1.96957 0 2.5V4.5C0 5.03043 0.210714 5.53914 0.585786 5.91421C0.960859 6.28929 1.46957 6.5 2 6.5H4C4.53043 6.5 5.03914 6.28929 5.41421 5.91421C5.78929 5.53914 6 5.03043 6 4.5V2.5C6 1.96957 5.78929 1.46086 5.41421 1.08579C5.03914 0.710714 4.53043 0.5 4 0.5H2ZM2 8.5C1.46957 8.5 0.960859 8.71071 0.585786 9.08579C0.210714 9.46086 0 9.96957 0 10.5V12.5C0 13.0304 0.210714 13.5391 0.585786 13.9142C0.960859 14.2893 1.46957 14.5 2 14.5H4C4.53043 14.5 5.03914 14.2893 5.41421 13.9142C5.78929 13.5391 6 13.0304 6 12.5V10.5C6 9.96957 5.78929 9.46086 5.41421 9.08579C5.03914 8.71071 4.53043 8.5 4 8.5H2ZM8 2.5C8 1.96957 8.21071 1.46086 8.58579 1.08579C8.96086 0.710714 9.46957 0.5 10 0.5H12C12.5304 0.5 13.0391 0.710714 13.4142 1.08579C13.7893 1.46086 14 1.96957 14 2.5V4.5C14 5.03043 13.7893 5.53914 13.4142 5.91421C13.0391 6.28929 12.5304 6.5 12 6.5H10C9.46957 6.5 8.96086 6.28929 8.58579 5.91421C8.21071 5.53914 8 5.03043 8 4.5V2.5ZM8 10.5C8 9.96957 8.21071 9.46086 8.58579 9.08579C8.96086 8.71071 9.46957 8.5 10 8.5H12C12.5304 8.5 13.0391 8.71071 13.4142 9.08579C13.7893 9.46086 14 9.96957 14 10.5V12.5C14 13.0304 13.7893 13.5391 13.4142 13.9142C13.0391 14.2893 12.5304 14.5 12 14.5H10C9.46957 14.5 8.96086 14.2893 8.58579 13.9142C8.21071 13.5391 8 13.0304 8 12.5V10.5Z"
fill="#90A4AE"
/>
</svg>
<a href="#" className="flex items-center">
Blocks
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="flex items-center gap-x-2 p-1 font-medium"
>
<svg
width="16"
height="15"
viewBox="0 0 16 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 2.5C0 1.96957 0.210714 1.46086 0.585786 1.08579C0.960859 0.710714 1.46957 0.5 2 0.5H14C14.5304 0.5 15.0391 0.710714 15.4142 1.08579C15.7893 1.46086 16 1.96957 16 2.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V2.5ZM3.293 3.793C3.48053 3.60553 3.73484 3.50021 4 3.50021C4.26516 3.50021 4.51947 3.60553 4.707 3.793L7.707 6.793C7.89447 6.98053 7.99979 7.23484 7.99979 7.5C7.99979 7.76516 7.89447 8.01947 7.707 8.207L4.707 11.207C4.5184 11.3892 4.2658 11.49 4.0036 11.4877C3.7414 11.4854 3.49059 11.3802 3.30518 11.1948C3.11977 11.0094 3.0146 10.7586 3.01233 10.4964C3.01005 10.2342 3.11084 9.9816 3.293 9.793L5.586 7.5L3.293 5.207C3.10553 5.01947 3.00021 4.76516 3.00021 4.5C3.00021 4.23484 3.10553 3.98053 3.293 3.793ZM9 9.5C8.73478 9.5 8.48043 9.60536 8.29289 9.79289C8.10536 9.98043 8 10.2348 8 10.5C8 10.7652 8.10536 11.0196 8.29289 11.2071C8.48043 11.3946 8.73478 11.5 9 11.5H12C12.2652 11.5 12.5196 11.3946 12.7071 11.2071C12.8946 11.0196 13 10.7652 13 10.5C13 10.2348 12.8946 9.98043 12.7071 9.79289C12.5196 9.60536 12.2652 9.5 12 9.5H9Z"
fill="#90A4AE"
/>
</svg>
<a href="#" className="flex items-center">
Docs
</a>
</Typography>
</ul>
);
return (
<Navbar className="mx-auto max-w-screen-xl px-4 py-2 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>
<div className="flex items-center gap-x-1">
<Button variant="text" size="sm" className="hidden lg:inline-block">
<span>Log In</span>
</Button>
<Button
variant="gradient"
size="sm"
className="hidden lg:inline-block"
>
<span>Sign in</span>
</Button>
</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 ? (
<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}
<div className="flex items-center gap-x-1">
<Button fullWidth variant="text" size="sm" className="">
<span>Log In</span>
</Button>
<Button fullWidth variant="gradient" size="sm" className="">
<span>Sign in</span>
</Button>
</div>
</div>
</MobileNav>
</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 function StickyNavbar() {
const [openNav, setOpenNav] = React.useState(false);
React.useEffect(() => {
window.addEventListener(
"resize",
() => window.innerWidth >= 960 && setOpenNav(false),
);
}, []);
const navList = (
<ul className="mt-2 mb-4 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 (
<div className="-m-6 max-h-[768px] w-[calc(100%+48px)] overflow-scroll">
<Navbar className="sticky top-0 z-10 h-max max-w-full rounded-none px-4 py-2 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>
<div className="flex items-center gap-x-1">
<Button
variant="text"
size="sm"
className="hidden lg:inline-block"
>
<span>Log In</span>
</Button>
<Button
variant="gradient"
size="sm"
className="hidden lg:inline-block"
>
<span>Sign in</span>
</Button>
</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 ? (
<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}
<div className="flex items-center gap-x-1">
<Button fullWidth variant="text" size="sm" className="">
<span>Log In</span>
</Button>
<Button fullWidth variant="gradient" size="sm" className="">
<span>Sign in</span>
</Button>
</div>
</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>
</div>
);
}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/solid";
// 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="tania andrew"
className="border border-gray-900 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 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 allowHover open={isMenuOpen} handler={setIsMenuOpen}>
<MenuHandler>
<Typography as="a" href="#" variant="small" className="font-normal">
<MenuItem className="hidden items-center gap-2 font-medium text-blue-gray-900 lg:flex lg:rounded-full">
<Square3Stack3DIcon className="h-[18px] w-[18px] text-blue-gray-500" />{" "}
Pages{" "}
<ChevronDownIcon
strokeWidth={2}
className={`h-3 w-3 transition-transform ${
isMenuOpen ? "rotate-180" : ""
}`}
/>
</MenuItem>
</Typography>
</MenuHandler>
<MenuList 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 font-medium text-blue-gray-900 lg:hidden">
<Square3Stack3DIcon className="h-[18px] w-[18px] text-blue-gray-500" />{" "}
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="mt-2 mb-4 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="gray"
className="font-medium text-blue-gray-500"
>
<MenuItem className="flex items-center gap-2 lg:rounded-full">
{React.createElement(icon, { className: "h-[18px] w-[18px]" })}{" "}
<span className="text-gray-900"> {label}</span>
</MenuItem>
</Typography>
))}
</ul>
);
}
export 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 justify-between 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="hidden 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>
<Button size="sm" variant="text">
<span>Log In</span>
</Button>
<ProfileMenu />
</div>
<MobileNav open={isNavOpen} className="overflow-scroll">
<NavList />
</MobileNav>
</Navbar>
);
}Use this navbar with a search component that combines navigation with a search functionality. It features the brand name "Material Tailwind" on the left, followed by a prominent search bar with a search icon inside. A black "SEARCH" button is positioned next to the search bar, making it easy for users to execute a search query.
import React from "react";
import {
Navbar,
MobileNav,
Typography,
Button,
IconButton,
Input,
} from "@material-tailwind/react";
export function NavbarWithSearch() {
const [openNav, setOpenNav] = React.useState(false);
React.useEffect(() => {
window.addEventListener(
"resize",
() => window.innerWidth >= 960 && setOpenNav(false),
);
}, []);
const navList = (
<ul className="mt-2 mb-4 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="flex items-center gap-x-2 p-1 font-medium"
>
<svg
width="16"
height="15"
viewBox="0 0 16 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 0.5C4.73478 0.5 4.48043 0.605357 4.29289 0.792893C4.10536 0.98043 4 1.23478 4 1.5C4 1.76522 4.10536 2.01957 4.29289 2.20711C4.48043 2.39464 4.73478 2.5 5 2.5H11C11.2652 2.5 11.5196 2.39464 11.7071 2.20711C11.8946 2.01957 12 1.76522 12 1.5C12 1.23478 11.8946 0.98043 11.7071 0.792893C11.5196 0.605357 11.2652 0.5 11 0.5H5ZM2 4.5C2 4.23478 2.10536 3.98043 2.29289 3.79289C2.48043 3.60536 2.73478 3.5 3 3.5H13C13.2652 3.5 13.5196 3.60536 13.7071 3.79289C13.8946 3.98043 14 4.23478 14 4.5C14 4.76522 13.8946 5.01957 13.7071 5.20711C13.5196 5.39464 13.2652 5.5 13 5.5H3C2.73478 5.5 2.48043 5.39464 2.29289 5.20711C2.10536 5.01957 2 4.76522 2 4.5ZM0 8.5C0 7.96957 0.210714 7.46086 0.585786 7.08579C0.960859 6.71071 1.46957 6.5 2 6.5H14C14.5304 6.5 15.0391 6.71071 15.4142 7.08579C15.7893 7.46086 16 7.96957 16 8.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V8.5Z"
fill="#90A4AE"
/>
</svg>
<a href="#" className="flex items-center">
Pages
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="flex items-center gap-x-2 p-1 font-medium"
>
<svg
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16 8.5C16 10.6217 15.1571 12.6566 13.6569 14.1569C12.1566 15.6571 10.1217 16.5 8 16.5C5.87827 16.5 3.84344 15.6571 2.34315 14.1569C0.842855 12.6566 0 10.6217 0 8.5C0 6.37827 0.842855 4.34344 2.34315 2.84315C3.84344 1.34285 5.87827 0.5 8 0.5C10.1217 0.5 12.1566 1.34285 13.6569 2.84315C15.1571 4.34344 16 6.37827 16 8.5ZM10 5.5C10 6.03043 9.78929 6.53914 9.41421 6.91421C9.03914 7.28929 8.53043 7.5 8 7.5C7.46957 7.5 6.96086 7.28929 6.58579 6.91421C6.21071 6.53914 6 6.03043 6 5.5C6 4.96957 6.21071 4.46086 6.58579 4.08579C6.96086 3.71071 7.46957 3.5 8 3.5C8.53043 3.5 9.03914 3.71071 9.41421 4.08579C9.78929 4.46086 10 4.96957 10 5.5ZM8 9.5C7.0426 9.49981 6.10528 9.77449 5.29942 10.2914C4.49356 10.8083 3.85304 11.5457 3.454 12.416C4.01668 13.0706 4.71427 13.5958 5.49894 13.9555C6.28362 14.3152 7.13681 14.5009 8 14.5C8.86319 14.5009 9.71638 14.3152 10.5011 13.9555C11.2857 13.5958 11.9833 13.0706 12.546 12.416C12.147 11.5457 11.5064 10.8083 10.7006 10.2914C9.89472 9.77449 8.9574 9.49981 8 9.5Z"
fill="#90A4AE"
/>
</svg>
<a href="#" className="flex items-center">
Account
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="flex items-center gap-x-2 p-1 font-medium"
>
<svg
width="14"
height="15"
viewBox="0 0 14 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 0.5C1.46957 0.5 0.960859 0.710714 0.585786 1.08579C0.210714 1.46086 0 1.96957 0 2.5V4.5C0 5.03043 0.210714 5.53914 0.585786 5.91421C0.960859 6.28929 1.46957 6.5 2 6.5H4C4.53043 6.5 5.03914 6.28929 5.41421 5.91421C5.78929 5.53914 6 5.03043 6 4.5V2.5C6 1.96957 5.78929 1.46086 5.41421 1.08579C5.03914 0.710714 4.53043 0.5 4 0.5H2ZM2 8.5C1.46957 8.5 0.960859 8.71071 0.585786 9.08579C0.210714 9.46086 0 9.96957 0 10.5V12.5C0 13.0304 0.210714 13.5391 0.585786 13.9142C0.960859 14.2893 1.46957 14.5 2 14.5H4C4.53043 14.5 5.03914 14.2893 5.41421 13.9142C5.78929 13.5391 6 13.0304 6 12.5V10.5C6 9.96957 5.78929 9.46086 5.41421 9.08579C5.03914 8.71071 4.53043 8.5 4 8.5H2ZM8 2.5C8 1.96957 8.21071 1.46086 8.58579 1.08579C8.96086 0.710714 9.46957 0.5 10 0.5H12C12.5304 0.5 13.0391 0.710714 13.4142 1.08579C13.7893 1.46086 14 1.96957 14 2.5V4.5C14 5.03043 13.7893 5.53914 13.4142 5.91421C13.0391 6.28929 12.5304 6.5 12 6.5H10C9.46957 6.5 8.96086 6.28929 8.58579 5.91421C8.21071 5.53914 8 5.03043 8 4.5V2.5ZM8 10.5C8 9.96957 8.21071 9.46086 8.58579 9.08579C8.96086 8.71071 9.46957 8.5 10 8.5H12C12.5304 8.5 13.0391 8.71071 13.4142 9.08579C13.7893 9.46086 14 9.96957 14 10.5V12.5C14 13.0304 13.7893 13.5391 13.4142 13.9142C13.0391 14.2893 12.5304 14.5 12 14.5H10C9.46957 14.5 8.96086 14.2893 8.58579 13.9142C8.21071 13.5391 8 13.0304 8 12.5V10.5Z"
fill="#90A4AE"
/>
</svg>
<a href="#" className="flex items-center">
Blocks
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="flex items-center gap-x-2 p-1 font-medium"
>
<svg
width="16"
height="15"
viewBox="0 0 16 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 2.5C0 1.96957 0.210714 1.46086 0.585786 1.08579C0.960859 0.710714 1.46957 0.5 2 0.5H14C14.5304 0.5 15.0391 0.710714 15.4142 1.08579C15.7893 1.46086 16 1.96957 16 2.5V12.5C16 13.0304 15.7893 13.5391 15.4142 13.9142C15.0391 14.2893 14.5304 14.5 14 14.5H2C1.46957 14.5 0.960859 14.2893 0.585786 13.9142C0.210714 13.5391 0 13.0304 0 12.5V2.5ZM3.293 3.793C3.48053 3.60553 3.73484 3.50021 4 3.50021C4.26516 3.50021 4.51947 3.60553 4.707 3.793L7.707 6.793C7.89447 6.98053 7.99979 7.23484 7.99979 7.5C7.99979 7.76516 7.89447 8.01947 7.707 8.207L4.707 11.207C4.5184 11.3892 4.2658 11.49 4.0036 11.4877C3.7414 11.4854 3.49059 11.3802 3.30518 11.1948C3.11977 11.0094 3.0146 10.7586 3.01233 10.4964C3.01005 10.2342 3.11084 9.9816 3.293 9.793L5.586 7.5L3.293 5.207C3.10553 5.01947 3.00021 4.76516 3.00021 4.5C3.00021 4.23484 3.10553 3.98053 3.293 3.793ZM9 9.5C8.73478 9.5 8.48043 9.60536 8.29289 9.79289C8.10536 9.98043 8 10.2348 8 10.5C8 10.7652 8.10536 11.0196 8.29289 11.2071C8.48043 11.3946 8.73478 11.5 9 11.5H12C12.2652 11.5 12.5196 11.3946 12.7071 11.2071C12.8946 11.0196 13 10.7652 13 10.5C13 10.2348 12.8946 9.98043 12.7071 9.79289C12.5196 9.60536 12.2652 9.5 12 9.5H9Z"
fill="#90A4AE"
/>
</svg>
<a href="#" className="flex items-center">
Docs
</a>
</Typography>
</ul>
);
return (
<Navbar className="mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4">
<div className="container mx-auto flex flex-wrap 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>
<div className="hidden items-center gap-x-2 lg:flex">
<div className="relative flex w-full gap-2 md:w-max">
<Input
type="search"
placeholder="Search"
containerProps={{
className: "min-w-[288px]",
}}
className=" !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
<div className="!absolute left-3 top-[13px]">
<svg
width="13"
height="14"
viewBox="0 0 14 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z"
fill="#CFD8DC"
/>
<path
d="M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z"
stroke="#CFD8DC"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
<Button size="md" className="rounded-lg ">
Search
</Button>
</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 ? (
<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}
<div className="flex flex-col gap-x-2 sm:flex-row sm:items-center">
<div className="relative w-full gap-2 md:w-max">
<Input
type="search"
placeholder="Search"
containerProps={{
className: "min-w-[288px]",
}}
className=" !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
<div className="!absolute left-3 top-[13px]">
<svg
width="13"
height="14"
viewBox="0 0 14 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z"
fill="#CFD8DC"
/>
<path
d="M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z"
stroke="#CFD8DC"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
<Button size="md" className="mt-1 rounded-lg sm:mt-0">
Search
</Button>
</div>
</div>
</MobileNav>
</Navbar>
);
}Use this sleek navbar with a search component that uses a dark background to improve the contrast and visibility of the elements.
import {
Navbar,
Typography,
IconButton,
Button,
Input,
} from "@material-tailwind/react";
import { BellIcon, Cog6ToothIcon } from "@heroicons/react/24/solid";
export function NavbarDark() {
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>
);
}Try this versatile Tailwind CSS navbar with no icons or buttons to focus on basic navigation. The rounded corners of the navbar add a subtle touch of modernity to the overall design.
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 function NavbarSimple() {
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>
);
}This example features a dropdown mega menu that expands to display multiple categories with icons and descriptions. It allows users to quickly access a wide range of resources directly from the navbar. The Tailwind CSS mega menu is ideal for websites with a large amount of content to organize.
import React from "react";
import {
Navbar,
Collapse,
Typography,
Button,
IconButton,
List,
ListItem,
Menu,
MenuHandler,
MenuList,
MenuItem,
} from "@material-tailwind/react";
import {
ChevronDownIcon,
Bars3Icon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import {
Bars4Icon,
GlobeAmericasIcon,
NewspaperIcon,
PhoneIcon,
RectangleGroupIcon,
SquaresPlusIcon,
SunIcon,
TagIcon,
UserGroupIcon,
} from "@heroicons/react/24/solid";
const navListMenuItems = [
{
title: "Products",
description: "Find the perfect solution for your needs.",
icon: SquaresPlusIcon,
},
{
title: "About Us",
description: "Meet and learn about our dedication",
icon: UserGroupIcon,
},
{
title: "Blog",
description: "Find the perfect solution for your needs.",
icon: Bars4Icon,
},
{
title: "Services",
description: "Learn how we can help you achieve your goals.",
icon: SunIcon,
},
{
title: "Support",
description: "Reach out to us for assistance or inquiries",
icon: GlobeAmericasIcon,
},
{
title: "Contact",
description: "Find the perfect solution for your needs.",
icon: PhoneIcon,
},
{
title: "News",
description: "Read insightful articles, tips, and expert opinions.",
icon: NewspaperIcon,
},
{
title: "Products",
description: "Find the perfect solution for your needs.",
icon: RectangleGroupIcon,
},
{
title: "Special Offers",
description: "Explore limited-time deals and bundles",
icon: TagIcon,
},
];
function NavListMenu() {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
const renderItems = navListMenuItems.map(
({ icon, title, description }, key) => (
<a href="#" key={key}>
<MenuItem className="flex items-center gap-3 rounded-lg">
<div className="flex items-center justify-center rounded-lg !bg-blue-gray-50 p-2 ">
{" "}
{React.createElement(icon, {
strokeWidth: 2,
className: "h-6 text-gray-900 w-6",
})}
</div>
<div>
<Typography
variant="h6"
color="blue-gray"
className="flex items-center text-sm font-bold"
>
{title}
</Typography>
<Typography
variant="paragraph"
className="text-xs !font-medium text-blue-gray-500"
>
{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-medium">
<ListItem
className="flex items-center gap-2 py-2 pr-4 font-medium text-gray-900"
selected={isMenuOpen || isMobileMenuOpen}
onClick={() => setIsMobileMenuOpen((cur) => !cur)}
>
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-3 gap-y-2 outline-none outline-0">
{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-medium"
>
<ListItem className="flex items-center gap-2 py-2 pr-4">Home</ListItem>
</Typography>
<NavListMenu />
<Typography
as="a"
href="#"
variant="small"
color="blue-gray"
className="font-medium"
>
<ListItem className="flex items-center gap-2 py-2 pr-4">
Contact Us
</ListItem>
</Typography>
</List>
);
}
export function NavbarWithMegaMenu() {
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">
Log In
</Button>
<Button variant="gradient" size="sm">
Sign In
</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>
Log In
</Button>
<Button variant="gradient" size="sm" fullWidth>
Sign In
</Button>
</div>
</Collapse>
</Navbar>
);
}Use this example to show a solid background for the navbar component instead of being transparent. The solid background ensures that the navigation elements are easily visible against any content.
import React from "react";
import {
Navbar,
Collapse,
Typography,
Button,
IconButton,
} from "@material-tailwind/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
export function NavbarWithSolidBackground() {
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 (
<div className="-m-6 max-h-[768px] w-[calc(100%+48px)] overflow-scroll">
<Navbar className="sticky top-0 z-10 h-max max-w-full bg-gray-100 rounded-none px-4 py-2 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="mr-4 hidden lg:block">{navList}</div>
<Button
variant="gradient"
size="sm"
className="hidden lg:inline-block"
>
<span>Get started</span>
</Button>
<IconButton
variant="text"
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}
<Button fullWidth variant="gradient" size="sm" className="">
<span>Get started</span>
</Button>
</Collapse>
</Navbar>
</div>
);
}Use this example to show another sub nav below the main nav bar element. This design allows for additional navigation options, such as "Sales" and "New In," providing users with quick access to specific sections or categories within the site.
import React from "react";
import {
Navbar,
Collapse,
Typography,
Button,
IconButton,
Input,
} from "@material-tailwind/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
export function NavbarWithSubmenu() {
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"
className="p-1 font-medium text-gray-600"
>
<a href="#" className="flex items-center">
Sales
</a>
</Typography>
<Typography
as="li"
variant="small"
className="p-1 font-medium text-gray-600"
>
<a href="#" className="flex items-center">
New In
</a>
</Typography>
<Typography
as="li"
variant="small"
className="p-1 font-medium text-gray-600"
>
<a href="#" className="flex items-center">
Blocks
</a>
</Typography>
<Typography
as="li"
variant="small"
className="p-1 font-medium text-gray-600"
>
<a href="#" className="flex items-center">
Docs
</a>
</Typography>
</ul>
);
return (
<Navbar className="mx-auto max-w-screen-xl px-4 py-2 lg:px-8 lg:py-4">
<div className="container mx-auto flex flex-wrap 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 items-center gap-x-2 lg:flex">
<div className="relative flex w-full gap-2 md:w-max">
<Input
type="search"
placeholder="Search"
containerProps={{
className: "min-w-[288px]",
}}
className=" !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
<div className="!absolute left-3 top-[13px]">
<svg
width="13"
height="14"
viewBox="0 0 14 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z"
fill="#CFD8DC"
/>
<path
d="M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z"
stroke="#CFD8DC"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
<Button size="md" className="rounded-lg ">
Search
</Button>
</div>
<hr className="mb-3 mt-6 hidden w-full lg:block" />
<IconButton
variant="text"
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 className="hidden lg:block">{navList}</div>
</div>
<Collapse open={openNav}>
<div className="container mx-auto">
{navList}
<div className="flex flex-col gap-x-2 sm:flex-row sm:items-center">
<div className="relative w-full gap-2 md:w-max">
<Input
type="search"
placeholder="Search"
containerProps={{
className: "min-w-[288px]",
}}
className=" !border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
<div className="!absolute left-3 top-[13px]">
<svg
width="13"
height="14"
viewBox="0 0 14 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.97811 7.95252C10.2126 7.38634 10.3333 6.7795 10.3333 6.16667C10.3333 4.92899 9.84167 3.742 8.9665 2.86683C8.09133 1.99167 6.90434 1.5 5.66667 1.5C4.42899 1.5 3.242 1.99167 2.36683 2.86683C1.49167 3.742 1 4.92899 1 6.16667C1 6.7795 1.12071 7.38634 1.35523 7.95252C1.58975 8.51871 1.93349 9.03316 2.36683 9.4665C2.80018 9.89984 3.31462 10.2436 3.88081 10.4781C4.447 10.7126 5.05383 10.8333 5.66667 10.8333C6.2795 10.8333 6.88634 10.7126 7.45252 10.4781C8.01871 10.2436 8.53316 9.89984 8.9665 9.4665C9.39984 9.03316 9.74358 8.51871 9.97811 7.95252Z"
fill="#CFD8DC"
/>
<path
d="M13 13.5L9 9.5M10.3333 6.16667C10.3333 6.7795 10.2126 7.38634 9.97811 7.95252C9.74358 8.51871 9.39984 9.03316 8.9665 9.4665C8.53316 9.89984 8.01871 10.2436 7.45252 10.4781C6.88634 10.7126 6.2795 10.8333 5.66667 10.8333C5.05383 10.8333 4.447 10.7126 3.88081 10.4781C3.31462 10.2436 2.80018 9.89984 2.36683 9.4665C1.93349 9.03316 1.58975 8.51871 1.35523 7.95252C1.12071 7.38634 1 6.7795 1 6.16667C1 4.92899 1.49167 3.742 2.36683 2.86683C3.242 1.99167 4.42899 1.5 5.66667 1.5C6.90434 1.5 8.09133 1.99167 8.9665 2.86683C9.84167 3.742 10.3333 4.92899 10.3333 6.16667Z"
stroke="#CFD8DC"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
<Button size="md" className="mt-1 rounded-lg sm:mt-0">
Search
</Button>
</div>
</div>
</Collapse>
</Navbar>
);
}Get started with this tailwind navbar example to show a language dropdown selector in the navbar component. Users can select from multiple languages, improving the accessibility and usability of the site for a global audience.
import React from "react";
import {
Navbar,
Collapse,
Typography,
Button,
IconButton,
Menu,
MenuHandler,
MenuList,
MenuItem,
} from "@material-tailwind/react";
import {
Bars3Icon,
ChevronDownIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
export function NavbarForDropdownWithMultipleLanguages() {
const [openMenu, setOpenMenu] = React.useState(false);
const [openNav, setOpenNav] = React.useState(false);
const [lang, setLang] = React.useState("English");
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-medium"
>
<a href="#" className="flex items-center">
Pages
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-medium"
>
<a href="#" className="flex items-center">
Account
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-medium"
>
<a href="#" className="flex items-center">
Blocks
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-medium"
>
<a href="#" className="flex items-center">
Docs
</a>
</Typography>
</ul>
);
const countries = [
{
flag: "🇺🇸",
name: "English",
},
{
flag: "🇪🇸",
name: "Spain",
},
{
flag: "🇫🇷",
name: "France",
},
{
flag: "🇩🇪",
name: "Germany",
},
];
return (
<Navbar className="mx-auto max-w-screen-xl px-4 py-2 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="mr-4 hidden lg:block">{navList}</div>
<div className="hidden flex-wrap items-center gap-2 lg:flex">
<Button variant="gradient" size="sm">
join
</Button>
<Menu open={openMenu} handler={setOpenMenu}>
<MenuHandler>
<Button
size="sm"
variant="outlined"
className="hidden items-center gap-2 lg:flex"
>
<span className="h-min text-base leading-none">
{countries.find(({ name }) => name === lang)?.flag}
</span>
{countries.find(({ name }) => name === lang)?.name}
<ChevronDownIcon
strokeWidth={2.5}
className={`h-3.5 w-3.5 transition-transform ${
openMenu ? "rotate-180" : ""
}`}
/>
</Button>
</MenuHandler>
<MenuList className="hidden max-h-72 w-20 lg:block">
{countries.map(({ name, flag }) => (
<MenuItem
key={name}
className="flex items-center gap-2"
onClick={() => setLang(name)}
>
{flag} {name}
</MenuItem>
))}
</MenuList>
</Menu>
</div>
<IconButton
variant="text"
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-x-4 lg:hidden">
<Button variant="gradient" size="sm" fullWidth>
join
</Button>
<Menu open={openMenu} handler={setOpenMenu}>
<MenuHandler>
<Button
fullWidth
size="sm"
variant="outlined"
className="flex items-center justify-center gap-2 lg:hidden"
>
🇺🇸 English{" "}
<ChevronDownIcon
strokeWidth={2.5}
className={`w-3.h-3.5 h-3.5 transition-transform ${
openMenu ? "rotate-180" : ""
}`}
/>
</Button>
</MenuHandler>
<MenuList className="block max-h-72 w-20 lg:hidden">
{countries.map(({ name, flag }) => (
<MenuItem key={name} className="flex items-center gap-2">
{flag} {name}
</MenuItem>
))}
</MenuList>
</Menu>
</div>
</Collapse>
</Navbar>
);
}You can also use the dropdown element inside a navigation bar to add a second level of navigation hierarchy. This example includes a "Blocks" menu with nested options like "Figma," "React," and "TailwindCSS," each with their own sub-options, such as "Hero," "Features," "Testimonials," and "Ecommerce." This structure allows for comprehensive navigation without overwhelming the user.
import React from "react";
import {
Navbar,
Collapse,
Typography,
Button,
IconButton,
List,
ListItem,
Menu,
MenuHandler,
MenuList,
MenuItem,
} from "@material-tailwind/react";
import {
ChevronDownIcon,
Bars3Icon,
XMarkIcon,
ChevronUpIcon,
} from "@heroicons/react/24/outline";
const nestedMenuItems = [
{
title: "Hero",
},
{
title: "Features",
},
{
title: "Testimonials",
},
{
title: "Ecommerce",
},
];
function NavListMenu() {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
const [openNestedMenu, setopenNestedMenu] = React.useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
const renderItems = nestedMenuItems.map(({ title }, key) => (
<a href="#" key={key}>
<MenuItem>{title}</MenuItem>
</a>
));
return (
<React.Fragment>
<Menu
open={isMenuOpen}
handler={setIsMenuOpen}
placement="bottom"
allowHover={true}
>
<MenuHandler>
<Typography as="div" variant="small" className="font-medium">
<ListItem
className="flex items-center gap-2 py-2 pr-4 font-medium text-gray-900"
selected={isMenuOpen || isMobileMenuOpen}
onClick={() => setIsMobileMenuOpen((cur) => !cur)}
>
Blocks
<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 rounded-xl lg:block">
<Menu
placement="right-start"
allowHover
offset={15}
open={openNestedMenu}
handler={setopenNestedMenu}
>
<MenuHandler className="flex items-center justify-between">
<MenuItem>
Figma
<ChevronUpIcon
strokeWidth={2.5}
className={`h-3.5 w-3.5 transition-transform ${
isMenuOpen ? "rotate-90" : ""
}`}
/>
</MenuItem>
</MenuHandler>
<MenuList className="rounded-xl">{renderItems}</MenuList>
</Menu>
<MenuItem>React</MenuItem>
<MenuItem>TailwindCSS</MenuItem>
</MenuList>
</Menu>
<div className="block lg:hidden">
<Collapse open={isMobileMenuOpen}>
<Menu
placement="bottom"
allowHover
offset={6}
open={openNestedMenu}
handler={setopenNestedMenu}
>
<MenuHandler className="flex items-center justify-between">
<MenuItem>
Figma
<ChevronUpIcon
strokeWidth={2.5}
className={`h-3.5 w-3.5 transition-transform ${
isMenuOpen ? "rotate-90" : ""
}`}
/>
</MenuItem>
</MenuHandler>
<MenuList className="block rounded-xl lg:hidden">
{renderItems}
</MenuList>
</Menu>
<MenuItem>React</MenuItem>
<MenuItem>TailwindCSS</MenuItem>
</Collapse>
</div>
</React.Fragment>
);
}
function NavList() {
return (
<List className="mb-6 mt-4 p-0 lg:mb-0 lg:mt-0 lg:flex-row lg:p-1">
<Typography
as="a"
href="#"
variant="small"
color="blue-gray"
className="font-medium"
>
<ListItem className="flex items-center gap-2 py-2 pr-4">Pages</ListItem>
</Typography>
<Typography
as="a"
href="#"
variant="small"
color="blue-gray"
className="font-medium"
>
<ListItem className="flex items-center gap-2 py-2 pr-4">
Account
</ListItem>
</Typography>
<NavListMenu />
<Typography
as="a"
href="#"
variant="small"
color="blue-gray"
className="font-medium"
>
<ListItem className="flex items-center gap-2 py-2 pr-4">Docs</ListItem>
</Typography>
</List>
);
}
export function NavigationbarWithDropdownMultilevelMenu() {
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 size="sm">Get Started</Button>
<Button variant="outlined" size="sm">
Log In
</Button>
</div>
<IconButton
variant="text"
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 size="sm" fullWidth>
Get Started
</Button>
<Button variant="outlined" size="sm" fullWidth>
Log In
</Button>
</div>
</Collapse>
</Navbar>
);
}The following props are available for navbar component. These are the custom props that we've added for the navbar component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
variant | Variant | Change navbar variant | filled |
color | Color | Change navbar color | white |
shadow | boolean | Add box-shadow for navbar | true |
blurred | boolean | Add blur backdrop effect for navbar and makes it's background color white | true |
fullWidth | boolean | Change navbar to a block level element and remove its border radius | false |
className | string | Add custom className for navbar | '' |
children | node | Add content for navbar | No default value it's a required prop. |
For TypeScript Only
import type { NavbarProps } from "@material-tailwind/react";type variant = "filled" | "gradient";type color =
| "transparent"
| "white"
| "blue-gray"
| "gray"
| "brown"
| "deep-orange"
| "orange"
| "amber"
| "yellow"
| "lime"
| "light-green"
| "green"
| "teal"
| "cyan"
| "light-blue"
| "blue"
| "indigo"
| "deep-purple"
| "purple"
| "pink"
| "red";type animate = {
mount?: object;
unmount?: object;
};Learn how to customize the theme and styles for navbar component, the theme object for navbar component has three main objects:
A. The defaultProps object for setting up the default value for props of navbar component.
B. The valid object for customizing the valid values for navbar component props.
C. The styles object for customizing the theme and styles of navbar component.
You can customize the theme and styles of navbar component by adding Tailwind CSS classes as key paired values for objects.
interface NavbarStylesType {
defaultProps: {
variant: string;
color: string;
shadow: boolean;
blurred: boolean;
fullWidth: boolean;
className: string;
};
valid: {
variants: string[];
colors: string[];
};
styles: {
base: {
navbar: {
initial: object;
shadow: object;
blurred: object;
fullWidth: object;
};
mobileNav: object;
};
variants: {
filled: object;
gradient: object;
};
};
}For TypeScript Only
import type { NavbarStylesType } from "@material-tailwind/react";const theme = {
navbar: {
styles: {
base: {
navbar: {
initial: {
display: "block",
width: "w-full",
maxWidth: "max-w-screen-2xl",
borderRadius: "rounded-xl",
py: "py-4",
px: "px-8",
},
shadow: {
boxShadow: "shadow-md",
},
blurred: {
backdropFilter: "backdrop-saturate-200 backdrop-blur-2xl",
bgOpacity: "bg-opacity-80",
borderWidth: "border",
borderColor: "border-white/80",
},
fullWidth: {
width: "w-full",
maxWidth: "max-w-full",
rounded: "rounded-none",
px: "px-4",
},
},
mobileNav: {
display: "block",
width: "w-full",
basis: "basis-full",
overflow: "overflow-hidden",
},
},
variants: {
filled: {
transparent: {
backgroud: "bg-transparent",
color: "text-white",
boxShadow: "shadow-none",
},
white: {
backgroud: "bg-white",
color: "text-white",
},
"blue-gray": {
backgroud: "bg-blue-gray-500",
color: "text-white",
},
gray: {
backgroud: "bg-gray-500",
color: "text-white",
},
brown: {
backgroud: "bg-brown-500",
color: "text-white",
},
"deep-orange": {
backgroud: "bg-deep-orange-500",
color: "text-white",
},
orange: {
backgroud: "bg-orange-500",
color: "text-white",
},
amber: {
backgroud: "bg-amber-500",
color: "text-black",
},
yellow: {
backgroud: "bg-yellow-500",
color: "text-black",
},
lime: {
backgroud: "bg-lime-500",
color: "text-black",
},
"light-green": {
backgroud: "bg-light-green-500",
color: "text-white",
},
green: {
backgroud: "bg-green-500",
color: "text-white",
},
teal: {
backgroud: "bg-teal-500",
color: "text-white",
},
cyan: {
backgroud: "bg-cyan-500",
color: "text-white",
},
"light-blue": {
backgroud: "bg-light-blue-500",
color: "text-white",
},
blue: {
backgroud: "bg-blue-500",
color: "text-white",
},
indigo: {
backgroud: "bg-indigo-500",
color: "text-white",
},
"deep-purple": {
backgroud: "bg-deep-purple-500",
color: "text-white",
},
purple: {
backgroud: "bg-purple-500",
color: "text-white",
},
pink: {
backgroud: "bg-pink-500",
color: "text-white",
},
red: {
backgroud: "bg-red-500",
color: "text-white",
},
},
gradient: {
transparent: {
backgroud: "bg-transparent",
color: "text-blue-gray-900",
boxShadow: "shadow-none",
},
white: {
backgroud: "bg-white",
color: "text-blue-gray-900",
},
"blue-gray": {
backgroud: "bg-gradient-to-tr from-blue-gray-600 to-blue-gray-400",
color: "text-white",
},
gray: {
backgroud: "bg-gradient-to-tr from-gray-600 to-gray-400",
color: "text-white",
},
brown: {
backgroud: "bg-gradient-to-tr from-brown-600 to-brown-400",
color: "text-white",
},
"deep-orange": {
backgroud: "bg-gradient-to-tr from-deep-orange-600 to-deep-orange-400",
color: "text-white",
},
orange: {
backgroud: "bg-gradient-to-tr from-orange-600 to-orange-400",
color: "text-white",
},
amber: {
backgroud: "bg-gradient-to-tr from-amber-600 to-amber-400",
color: "text-black",
},
yellow: {
backgroud: "bg-gradient-to-tr from-yellow-600 to-yellow-400",
color: "text-black",
},
lime: {
backgroud: "bg-gradient-to-tr from-lime-600 to-lime-400",
color: "text-black",
},
"light-green": {
backgroud: "bg-gradient-to-tr from-light-green-600 to-light-green-400",
color: "text-white",
},
green: {
backgroud: "bg-gradient-to-tr from-green-600 to-green-400",
color: "text-white",
},
teal: {
backgroud: "bg-gradient-to-tr from-teal-600 to-teal-400",
color: "text-white",
},
cyan: {
backgroud: "bg-gradient-to-tr from-cyan-600 to-cyan-400",
color: "text-white",
},
"light-blue": {
backgroud: "bg-gradient-to-tr from-light-blue-600 to-light-blue-400",
color: "text-white",
},
blue: {
backgroud: "bg-gradient-to-tr from-blue-600 to-blue-400",
color: "text-white",
},
indigo: {
backgroud: "bg-gradient-to-tr from-indigo-600 to-indigo-400",
color: "text-white",
},
"deep-purple": {
backgroud: "bg-gradient-to-tr from-deep-purple-600 to-deep-purple-400",
color: "text-white",
},
purple: {
backgroud: "bg-gradient-to-tr from-purple-600 to-purple-400",
color: "text-white",
},
pink: {
backgroud: "bg-gradient-to-tr from-pink-600 to-pink-400",
color: "text-white",
},
red: {
backgroud: "bg-gradient-to-tr from-red-600 to-red-400",
color: "text-white",
},
},
},
},
},
};Check out more navigation bar examples from Material Tailwind Blocks: