使用精美元件更快交付產品
NextUI Pro

導覽列 (Navbar)

一個響應式的導覽標頭，位於頁面頂部，包含品牌、連結、導覽、折疊選單等支援。

Storybook@nextui-org/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 屬性停用它。

含下拉式選單

可以使用 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

屬性類型預設值
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>>
屬性類型預設值
onMenuOpenChange
(isOpen: boolean) => void
onScrollPositionChange
(position: number) => void
屬性類型預設值
children*
ReactNode[]
justify
start | center | end
"start"
屬性類型預設值
children
ReactNode
isActive
boolean
false
屬性類型預設值
icon
ReactNode | ((isOpen: boolean | undefined) => ReactNode | null)
isSelected
boolean
false
defaultSelected
boolean
false
srOnlyText
string
"開啟/關閉導覽選單"
屬性類型預設值
onChange
(isOpen: boolean) => void
屬性類型預設值
children*
ReactNode[]
portalContainer
HTMLElement
"document.body"
motionProps
MotionProps
屬性類型預設值
children
ReactNode
isActive
boolean
false

類型

模態框分頁