使用精美的组件更快地交付
HeroUI 专业版

Navbar

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

Storybook@heroui/navbar源代码样式源代码

安装

以上命令仅用于单独安装。如果以下情况，您可以跳过此步骤 @heroui/react 已全局安装。

导入

HeroUI 导出 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 属性。您可以使用此属性来自定义它。

插槽 (Slots)

  • base: 导航栏的主要插槽。它占据父元素的完整宽度，并包裹包括菜单在内的导航栏元素。
  • wrapper: 包含导航栏元素的插槽，例如 brand、content 和 toggle。
  • brand: NavbarBrand 组件的插槽。
  • content: NavbarContent 组件的插槽。
  • item: NavbarItem 组件的插槽。
  • toggle: NavbarMenuToggle 组件的插槽。
  • toggleIcon: NavbarMenuToggle 图标的插槽。
  • menu: NavbarMenu 组件的插槽。
  • menuItem: NavbarMenuItem 组件的插槽。

数据属性 (Data Attributes)

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

属性 (Prop)类型 (Type)默认值 (Default)
children*
ReactNode[]
height (高度)
string | number
"4rem (64px)"
position (位置)
static | sticky
"sticky"
maxWidth (最大宽度)
sm | md | lg | xl | 2xl | full
"lg"
parentRef (父元素引用)
React.RefObject<HTMLElement>
"window"
isBordered (是否有边框)
boolean
false
isBlurred (是否模糊)
boolean
true
isMenuOpen (菜单是否打开)
boolean
false
isMenuDefaultOpen (菜单默认是否打开)
boolean
false
shouldHideOnScroll (滚动时是否应隐藏)
boolean
false
motionProps (动画属性)
MotionProps
disableScrollHandler (禁用滚动处理)
boolean
false
disableAnimation (禁用动画)
boolean
false
classNames (类名)
Partial<Record<'base' | 'wrapper' | 'brand' | 'content' | 'item' | 'toggle' | 'toggleIcon' | 'menu' | 'menuItem', string>>
属性 (Prop)类型 (Type)默认值 (Default)
onMenuOpenChange (菜单打开状态改变时)
(isOpen: boolean) => void
onScrollPositionChange (滚动位置改变时)
(position: number) => void
属性 (Prop)类型 (Type)默认值 (Default)
children*
ReactNode[]
justify (对齐方式)
start | center | end
"start"
属性 (Prop)类型 (Type)默认值 (Default)
children (子元素)
ReactNode
isActive (是否激活)
boolean
false
属性 (Prop)类型 (Type)默认值 (Default)
icon (图标)
ReactNode | ((isOpen: boolean | undefined) => ReactNode)
isSelected (是否选中)
boolean
false
defaultSelected (默认选中)
boolean
false
srOnlyText (屏幕阅读器专用文本)
string
"open/close navigation menu" (打开/关闭导航菜单)
属性 (Prop)类型 (Type)默认值 (Default)
onChange (状态改变时)
(isOpen: boolean) => void
属性 (Prop)类型 (Type)默认值 (Default)
children*
ReactNode[]
portalContainer (传送门容器)
HTMLElement
"document.body"
motionProps (动画属性)
MotionProps
属性 (Prop)类型 (Type)默认值 (Default)
children (子元素)
ReactNode
isActive (是否激活)
boolean
false

类型 (Types)

ModalPagination