Navbar

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

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

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

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

用法

静态定位

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

滚动时隐藏

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

带菜单

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

如果你想移除 打开 / 关闭 动画，可以向 Navbar 组件传递 disableAnimation={true} 属性。

受控菜单

你可以使用 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 属性为 true 时使用。

API

Navbar 属性

Navbar 事件

NavbarContent 属性

NavbarItem 属性

NavbarMenuToggle 属性

NavbarMenuToggle 事件

NavbarMenu 属性

NavbarMenuItem 属性

类型