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 {icon}</a>
</Typography>
<Typography as="li" variant="small" className="p-1 font-normal">
<a className="flex items-center">Account {icon}</a>
</Typography>
<Typography as="li" variant="small" className="p-1 font-normal">
<a className="flex items-center">Blocks {icon}</a>
</Typography>
<Typography as="li" variant="small" className="p-1 font-normal">
<a className="flex items-center">Docs {icon}</a>
</Typography>
</ul>
<Button variant="gradient" size="sm">
Buy Now
</Button>
</div>
</Navbar>
);
}
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. |
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";