@heroui/navbar
Version:
A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.
266 lines (263 loc) • 12.7 kB
TypeScript
import * as react from 'react';
import * as tailwind_variants from 'tailwind-variants';
import * as _heroui_system from '@heroui/system';
import { HTMLHeroUIProps, PropGetter } from '@heroui/system';
import { SlotsToClasses, NavbarSlots, NavbarVariantProps } from '@heroui/theme';
import { ReactRef } from '@heroui/react-utils';
import { HTMLMotionProps } from 'framer-motion';
interface Props extends HTMLHeroUIProps<"nav"> {
/**
* Ref to the DOM node.
*/
ref?: ReactRef<HTMLElement | null>;
/**
* 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.
* @default `window`
*/
parentRef?: React.RefObject<HTMLElement>;
/**
* The height of the navbar.
* @default "4rem" (64px)
*/
height?: number | string;
/**
* Whether the menu is open.
* @default false
*/
isMenuOpen?: boolean;
/**
* Whether the menu should be open by default.
* @default false
*/
isMenuDefaultOpen?: boolean;
/**
* Whether the navbar should hide on scroll or not.
* @default false
*/
shouldHideOnScroll?: boolean;
/**
* Whether the navbar should block scroll when the menu is open or not.
* @default false
*/
shouldBlockScroll?: boolean;
/**
* Whether the navbar parent scroll event should be listened to or not.
* @default false
*/
disableScrollHandler?: boolean;
/**
* 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`.
*/
motionProps?: Omit<HTMLMotionProps<"nav">, "ref">;
/**
* The event handler for the menu open state.
* @param isOpen boolean
* @returns void
*/
onMenuOpenChange?: (isOpen: boolean) => 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`.
*/
onScrollPositionChange?: (scrollPosition: number) => void;
/**
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Navbar classNames={{
* base:"base-classes",
* wrapper: "wrapper-classes",
* brand: "brand-classes",
* content: "content-classes",
* item: "item-classes",
* menu: "menu-classes", // the one that appears when the menu is open
* menuItem: "menu-item-classes",
* }} />
* ```
*/
classNames?: SlotsToClasses<NavbarSlots>;
}
type UseNavbarProps = Props & NavbarVariantProps;
declare function useNavbar(originalProps: UseNavbarProps): {
Component: _heroui_system.As<any>;
slots: {
base: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
wrapper: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
toggle: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
srOnly: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
toggleIcon: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
brand: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
content: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
item: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
menu: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
menuItem: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
} & {
base: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
wrapper: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
toggle: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
srOnly: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
toggleIcon: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
brand: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
content: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
item: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
menu: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
menuItem: (slotProps?: ({
maxWidth?: "lg" | "sm" | "md" | "xl" | "2xl" | "full" | undefined;
position?: "static" | "sticky" | undefined;
isBlurred?: boolean | undefined;
hideOnScroll?: boolean | undefined;
isBordered?: boolean | undefined;
disableAnimation?: boolean | undefined;
} & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
} & {};
domRef: react.RefObject<HTMLElement>;
height: string | number;
isHidden: boolean;
disableAnimation: boolean;
shouldHideOnScroll: boolean;
isMenuOpen: boolean;
classNames: SlotsToClasses<"base" | "menu" | "content" | "wrapper" | "toggle" | "srOnly" | "toggleIcon" | "brand" | "item" | "menuItem"> | undefined;
setIsMenuOpen: (value: boolean, ...args: any[]) => void;
motionProps: Omit<HTMLMotionProps<"nav">, "ref"> | undefined;
getBaseProps: PropGetter;
getWrapperProps: PropGetter;
};
type UseNavbarReturn = ReturnType<typeof useNavbar>;
export { type UseNavbarProps, type UseNavbarReturn, useNavbar };