导航栏

一个响应式的导航头，位于页面顶部，支持品牌标识、链接、导航、折叠菜单等。

安装

上述命令仅用于单独安装。如果 @nextui-org/react 已全局安装，则可以跳过此步骤。

导入

NextUI 导出了 7 个与导航栏相关的组件

• Navbar：导航栏的主要组件。
• NavbarBrand：用于品牌宣传的组件。
• NavbarContent：用于包裹导航栏项目的组件。
• NavbarItem：用于导航栏项目的组件。
• NavbarMenuToggle：用于切换导航栏菜单的组件。
• NavbarMenu：用于包裹导航栏菜单项目的组件。
• NavbarMenuItem：用于导航栏菜单项目的组件。

用法

静态

你可以使用 position 属性使导航栏静态定位（默认行为是 sticky）。

滚动时隐藏

可以通过使用 shouldHideOnScroll 属性在滚动时隐藏导航栏。

带有菜单

你可以使用 NavbarMenuToggle 和 NavbarMenu 组件来显示可切换的菜单。

如果想要移除 open / close 动画，你可以将 disableAnimation={true} 属性传递给 Navbar 组件。

受控菜单

你可以使用 isMenuOpen 和 onMenuOpenChange 属性来控制导航栏菜单的状态。

带有边框

您可以使用 isBordered 属性为导航栏添加底部边框。

禁用模糊效果

导航栏默认带有模糊效果。您可以使用 isBlurred=false 属性禁用它。

带有下拉菜单

可以使用 Dropdown 组件将下拉菜单显示为导航栏项。

带有头像

带有头像和下拉菜单的导航栏示例。

带有搜索输入框

带有搜索输入框的导航栏示例。

自定义活动项

当 NavbarItem 处于活动状态时，它将具有 data-active 属性。您可以使用此属性对其进行自定义。

插槽

• base：导航栏的主插槽。它占用父元素的全部宽度，并包裹导航栏元素（包括菜单）。
• wrapper：包含导航栏元素的插槽，例如 brand、content 和 toggle。
• brand：NavbarBrand 组件的插槽。
• content：NavbarContent 组件的插槽。
• item：NavbarItem 组件的插槽。
• toggle：NavbarMenuToggle 组件的插槽。
• toggleIcon：NavbarMenuToggle 图标的插槽。
• menu：NavbarMenu 组件的插槽。
• menuItem：NavbarMenuItem 组件的插槽。

数据属性

Navbar 在 base 元素上具有以下属性

• data-menu-open：指示导航栏菜单是否打开。
• data-hidden：指示导航栏是否隐藏。当 shouldHideOnScroll 属性为 true 时使用。

NavbarContent

• data-justify：导航栏内容的对齐方式。它会考虑正确的空间分配。

NavbarItem 在 base 元素上具有以下属性

• data-active：指示导航栏项是否处于活动状态。当 isActive 属性为 true 时使用。

NavbarMenuToggle 在 base 元素上具有以下属性

• data-open：指示导航栏菜单是否打开。当 isMenuOpen 属性为 true 时使用。
• data-pressed：当导航栏菜单切换按钮被按下时。基于 usePress
• data-hover: 当导航栏菜单切换按钮被悬停时。基于 useHover。
• data-focus-visible: 当使用键盘聚焦导航栏菜单切换按钮时。基于 useFocusRing。

NavbarMenuItem 在 base 元素上具有以下属性

• data-active: 指示菜单项是否处于活动状态。当 isActive prop 为 true 时使用。

API

Navbar 属性

Navbar 事件

NavbarContent 属性

NavbarItem 属性

NavbarMenuToggle 属性

NavbarMenuToggle 事件

NavbarMenu 属性

NavbarMenuItem 属性

类型