-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
navbar-menu-item.tsx
40 lines (31 loc) 路 1.01 KB
/
navbar-menu-item.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
import {useDOMRef} from "@nextui-org/react-utils";
import {clsx, dataAttr} from "@nextui-org/shared-utils";
import {useNavbarContext} from "./navbar-context";
export interface NavbarMenuItemProps extends HTMLNextUIProps<"li"> {
/**
* Whether the item is active or not.
* @default false
*/
isActive?: boolean;
children?: React.ReactNode;
}
const NavbarMenuItem = forwardRef<"li", NavbarMenuItemProps>((props, ref) => {
const {className, children, isActive, ...otherProps} = props;
const domRef = useDOMRef(ref);
const {slots, isMenuOpen, classNames} = useNavbarContext();
const styles = clsx(classNames?.menuItem, className);
return (
<li
ref={domRef}
className={slots.menuItem?.({class: styles})}
data-active={dataAttr(isActive)}
data-open={dataAttr(isMenuOpen)}
{...otherProps}
>
{children}
</li>
);
});
NavbarMenuItem.displayName = "NextUI.NavbarMenuItem";
export default NavbarMenuItem;