diff --git a/apps/docs/app/examples/navbar/controlled-menu/page.tsx b/apps/docs/app/examples/navbar/controlled-menu/page.tsx new file mode 100644 index 000000000..500ba04d1 --- /dev/null +++ b/apps/docs/app/examples/navbar/controlled-menu/page.tsx @@ -0,0 +1,104 @@ +"use client"; + +import { + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + Link, + NavbarMenu, + NavbarMenuItem, + NavbarMenuToggle, + Avatar, +} from "@nextui-org/react"; +import React from "react"; + +const AcmeLogo = () => ( + + + +); + +export default function Page() { + const [isMenuOpen, setIsMenuOpen] = React.useState(false); + + const menuItems = [ + "Profile", + "Dashboard", + "Activity", + "Analytics", + "System", + "Deployments", + "My Settings", + "Team Settings", + "Help & Feedback", + "Log Out", + ]; + + return ( + + + + + + + + +

ACME

+ + + + + + +

ACME

+ + + Features + + + Customers + + + Integrations + + + + + + + + + + + {menuItems.map((item, index) => ( + + + {item} + + + ))} + + + ); +} diff --git a/apps/docs/app/examples/navbar/disable-menu-animation/page.tsx b/apps/docs/app/examples/navbar/disable-menu-animation/page.tsx index 22113922d..feb53c897 100644 --- a/apps/docs/app/examples/navbar/disable-menu-animation/page.tsx +++ b/apps/docs/app/examples/navbar/disable-menu-animation/page.tsx @@ -25,8 +25,6 @@ const AcmeLogo = () => ( ); export default function Page() { - const [isMenuOpen, setIsMenuOpen] = React.useState(false); - const menuItems = [ "Profile", "Dashboard", @@ -41,12 +39,12 @@ export default function Page() { ]; return ( - + - + - +

ACME

diff --git a/apps/docs/content/components/navbar/controlled-menu.ts b/apps/docs/content/components/navbar/controlled-menu.ts new file mode 100644 index 000000000..e77995ab6 --- /dev/null +++ b/apps/docs/content/components/navbar/controlled-menu.ts @@ -0,0 +1,102 @@ +const AcmeLogo = `export const AcmeLogo = () => ( + + + +);`; + +const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; +import {AcmeLogo} from "./AcmeLogo.jsx"; + +export default function App() { + const [isMenuOpen, setIsMenuOpen] = React.useState(false); + + const menuItems = [ + "Profile", + "Dashboard", + "Activity", + "Analytics", + "System", + "Deployments", + "My Settings", + "Team Settings", + "Help & Feedback", + "Log Out", + ]; + + return ( + + + + + + + + +

ACME

+ + + + + + +

ACME

+ + + Features + + + Customers + + + Integrations + + + + + + Login + + + + + + + + {menuItems.map((item, index) => ( + + + {item} + + + ))} + + + ); +}`; + +const react = { + "/App.jsx": App, + "/AcmeLogo.jsx": AcmeLogo, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/navbar/disable-menu-animation.ts b/apps/docs/content/components/navbar/disable-menu-animation.ts index 9d79ecfb2..7b57e93d5 100644 --- a/apps/docs/content/components/navbar/disable-menu-animation.ts +++ b/apps/docs/content/components/navbar/disable-menu-animation.ts @@ -13,8 +13,6 @@ const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Butto import {AcmeLogo} from "./AcmeLogo.jsx"; export default function App() { - const [isMenuOpen, setIsMenuOpen] = React.useState(false); - const menuItems = [ "Profile", "Dashboard", @@ -29,12 +27,12 @@ export default function App() { ]; return ( - + - + - +

ACME

diff --git a/apps/docs/content/components/navbar/index.ts b/apps/docs/content/components/navbar/index.ts index 0538a556b..df04d0903 100644 --- a/apps/docs/content/components/navbar/index.ts +++ b/apps/docs/content/components/navbar/index.ts @@ -4,6 +4,7 @@ import disabledBlur from "./disabled-blur"; import staticPosition from "./static"; import hideOnScroll from "./hide-on-scroll"; import withMenu from "./with-menu"; +import controlledMenu from "./controlled-menu"; import disableMenuAnimation from "./disable-menu-animation"; import withAvatar from "./with-avatar"; import withDropdownMenu from "./with-dropdown-menu"; @@ -17,6 +18,7 @@ export const navbarContent = { hideOnScroll, disabledBlur, withMenu, + controlledMenu, disableMenuAnimation, withAvatar, withDropdownMenu, diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx index 6c882a4b1..5f2648516 100644 --- a/apps/docs/content/docs/components/navbar.mdx +++ b/apps/docs/content/docs/components/navbar.mdx @@ -108,6 +108,20 @@ If you want to remove the `open` / `close` animation, you can pass the `disableA files={navbarContent.disableMenuAnimation} /> +### Controlled Menu + +You can use the `isMenuOpen` and `onMenuOpenChange` props to control the navbar menu state. + + + ### With Border You can use the `isBordered` prop to add a bottom border to the navbar. @@ -170,7 +184,7 @@ Example of a navbar with search input. /> -### Active Item Customization +### Customizing the active item When the `NavbarItem` is active, it will have a `data-active` attribute. You can use this attribute to customize it. @@ -182,3 +196,29 @@ When the `NavbarItem` is active, it will have a `data-active` attribute. You can highlightedLines="9-20" files={navbarContent.customActiveItem} /> + +## Data Attributes + +`Navbar` has the following attributes on the `root` element: + +- **data-menu-open**: + Indicates if the navbar menu is open. +- **data-hidden**: + Indicates if the navbar is hidden. It is used when the `shouldHideOnScroll` prop is `true`. + +`NavbarItem` has the following attributes on the `root` element: + +- **data-active**: + Indicates if the navbar item is active. It is used when the `isActive` prop is `true`. + +`NavbarMenuToggle` has the following attributes on the `root` element: + +- **data-open**: + Indicates if the navbar menu is open. It is used when the `isMenuOpen` prop is `true`. +- **data-pressed**: + When the navbar menu toggle is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) +- **data-hover**: + When the navbar menu toggle is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) +- **data-focus-visible**: + When the navbar menu toggle is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). +