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 { Navbar } from "../packages/material-tailwind-react/src";
import { Button } from "../packages/material-tailwind-react/src";
import { Typography } from "../packages/material-tailwind-react/src";
 
export default function Example() {
  const icon = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="h-4 w-4 opacity-75"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fillRule="evenodd"
        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
        clipRule="evenodd"
      />
    </svg>
  );
 
  return (
    <Navbar className="max-w-screen-xl mx-auto">
      <div className="container flex justify-between items-center text-blue-grey-900">
        <Typography
          as="a"
          href="#"
          variant="small"
          className="py-1.5 mr-4 font-normal cursor-pointer"
        >
          Material Tailwind
        </Typography>
        <ul className="flex items-center gap-6">
          <Typography as="li" variant="small" className="p-1 font-normal">
            <a className="flex items-center">Pages&nbsp;{icon}</a>
          </Typography>
          <Typography as="li" variant="small" className="p-1 font-normal">
            <a className="flex items-center">Account&nbsp;{icon}</a>
          </Typography>
          <Typography as="li" variant="small" className="p-1 font-normal">
            <a className="flex items-center">Blocks&nbsp;{icon}</a>
          </Typography>
          <Typography as="li" variant="small" className="p-1 font-normal">
            <a className="flex items-center">Docs&nbsp;{icon}</a>
          </Typography>
        </ul>
        <Button variant="gradient" size="sm">
          Buy Now
        </Button>
      </div>
    </Navbar>
  );
}

Props

The following props are available for the navbar component. These are the custom props that come with we've added for the navbar component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
variantVariantChange navbar variantfilled
colorColorChange navbar colorwhite
shadowbooleanAdd box-shadow for navbartrue
blurredbooleanAdd blur backdrop effect for navbar and makes it's background color whitetrue
fullWidthbooleanChange navbar to a block level element and remove its border radiusfalse
classNamestringAdd custom className for navbar''
childrennodeAdd content for navbarNo default value its a required prop.

Types

type variant = "filled" | "gradient";
type color =
  | "transparent"
  | "white"
  | "blue-grey"
  | "grey"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";
Edit this page on Github