Use our responsive AstroLaunch UI 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 AstroLaunch UI and React project.
Examples on this page are using @heroicons/react make sure you have installed it.
npm i @heroicons/reactUse 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.
If you want a more sophisticated navbar, use this example with icons and dropdown.
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",
},
},
},
},
},
};If you want to see more examples and properties please check the official Material Tailwind Documentation.