| children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ReactNode[] | | |
| colorScheme | "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo" | | The visual color appearance of the component |
| disableScrollHandler | boolean | false | Whether the navbar parent scroll event should be listened to or not. |
| height | string | number | "3.5rem" (56px) | The height of the navbar. |
| motionProps | HTMLMotionProps<"nav"> | | The props to modify the framer motion animation. Use the variants API to create your own animation.
This motion is only available if the shouldHideOnScroll prop is set to true. |
| onAnimationStart | (definition: AnimationDefinition) => void | | Callback when animation defined in animate begins.
The provided callback will be called with the triggering animation definition.
If this is a variant, it'll be the variant name, and if a target object
then it'll be the target object.
This way, it's possible to figure out which animation has started.
```jsx
function onStart() {
console.log("Animation started")
}
<motion.div animate={{ x: 100 }} onAnimationStart={onStart} />
``` |
| onDrag | (
event: MouseEvent | TouchEvent | PointerEvent,
info: PanInfo,
) => void | | Callback function that fires when the component is dragged.
```jsx
<motion.div
drag
onDrag={
(event, info) => console.log(info.point.x, info.point.y)
}
/>
``` |
| onDragEnd | (
event: MouseEvent | TouchEvent | PointerEvent,
info: PanInfo,
) => void | | Callback function that fires when dragging ends.
```jsx
<motion.div
drag
onDragEnd={
(event, info) => console.log(info.point.x, info.point.y)
}
/>
``` |
| onDragStart | (
event: MouseEvent | TouchEvent | PointerEvent,
info: PanInfo,
) => void | | Callback function that fires when dragging starts.
```jsx
<motion.div
drag
onDragStart={
(event, info) => console.log(info.point.x, info.point.y)
}
/>
``` |
| onScrollPositionChange | (scrollPosition: number) => void | | The scroll event handler for the navbar. The event fires when the navbar parent element is scrolled.
it only works if disableScrollHandler is set to false or shouldHideOnScroll is set to true. |
| parentRef | RefObject<HTMLElement> | `window` | The parent element where the navbar is placed within.
This is used to determine the scroll position and whether the navbar should be hidden or not. |
| shouldHideOnScroll | boolean | false | Whether the navbar should hide on scroll or not. |
| size | string | | The size of the Navbar |
| style | CSSProperties | | Style props to be applied to the navbar container. |
| variant | string | | The variant of the Navbar |