使用优美的组件更快地发布
NextUI Pro

导航栏

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

Storybook@nextui-org/navbarSourceStyles source

安装

npx nextui-cli@latest add navbar
以上命令仅用于单个安装。如果 @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 属性禁用它。

带下拉菜单

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

带头像

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

带搜索输入框

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

自定义活动项目

当 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: 导航栏内容的 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

属性类型描述默认值
children*ReactNode[]要渲染的子元素。通常是导航栏元素，例如 NavbarBrand、NavbarContent 和 NavbarItem-
heightstring | number导航栏的高度。4rem (64px)
positionstatic | sticky导航栏的位置。固定
最大宽度sm | md | lg | xl | 2xl | full导航栏包装器的最大宽度。lg
父级引用React.RefObject<HTMLElement>放置导航栏的父级元素。用于确定滚动位置以及导航栏是否应该隐藏。窗口
是否有边框布尔值导航栏是否应该有底部边框。false
是否模糊布尔值导航栏是否应该有模糊效果。true
菜单是否打开布尔值指示导航栏菜单是否打开。（受控）false
菜单默认打开布尔值指示导航栏菜单是否默认打开。（不受控）false
滚动时是否隐藏布尔值指示导航栏是否应该在滚动时隐藏。false
运动属性MotionProps控制可见 / 隐藏动画的运动属性。此运动仅在滚动时是否隐藏属性设置为true时可用。-
禁用滚动处理程序布尔值是否监听导航栏父级滚动事件。false
disableAnimation布尔值是否禁用导航栏菜单动画。false
classNamesRecord<"base"｜ "wrapper"｜ "brand"｜ "content"｜ "item"｜ "toggle"｜ "toggleIcon"｜ "menu"｜ "menuItem", string>允许为导航栏插槽设置自定义类名。-
属性类型描述
onMenuOpenChange(isOpen: boolean) => void当导航栏菜单打开状态发生变化时调用的处理程序。
onScrollPositionChange(position: number) => void当导航栏父元素滚动时调用的处理程序。仅当 disableScrollHandler 设置为 false 或 shouldHideOnScroll 设置为 true 时才会分派此事件。
属性类型描述默认值
children*ReactNode[]要渲染的子元素。通常是导航栏元素，例如 NavbarBrand、NavbarContent 和 NavbarItem-
justifystart | center | end导航栏内容的对齐方式。它考虑了正确的空间分配。开始
属性类型描述默认值
子元素ReactNode作为导航栏项渲染的子元素。-
isActive布尔值导航栏项是否处于活动状态。false
属性类型描述默认值
图标ReactNode | (isOpen: boolean | undefined) => ReactNode | null;作为导航栏菜单切换按钮渲染的图标。-
isSelected布尔值导航栏菜单切换按钮是否被选中。（受控）false
defaultSelected布尔值导航栏菜单切换按钮是否默认被选中。（不受控）false
srOnlyText字符串屏幕阅读器使用的文本。打开/关闭 导航菜单
属性类型描述
onChange(isOpen: boolean) => void当按下导航栏菜单切换按钮时调用的处理程序。
属性类型描述默认值
children*ReactNode[]要渲染为导航栏菜单的子元素。通常是 NavbarMenuItem 组件的列表。-
portalContainerHTMLElement将放置导航栏菜单覆盖层门户的容器元素。document.body
运动属性MotionProps用于控制 open / close 动画的运动属性。此运动仅在 disableAnimation 属性设置为 false 时可用。-
属性类型描述默认值
子元素ReactNode作为菜单项呈现的子元素。-
isActive布尔值菜单项是否处于活动状态。false

注意：其他导航栏组件，例如 NavbarMenuItem 和 NavbarBrand，具有与 li 元素相同的属性。

运动属性

export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/
模态框分页