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.

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 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";

popover

Edit this page on Github