Navbar 导航栏

具有灵活布局的导航栏组件,用于页眉和应用栏。

导入

import { Navbar } from 'asterui'

示例

基础导航栏

带有标题和导航按钮的简单导航栏。

import { Navbar, Button, Typography, Flex } from 'asterui'

function App() {
  return (
      <Navbar
        start={<Typography.Text strong className="text-xl">AsterUI</Typography.Text>}
        end={
          <Flex gap="sm">
            <Button variant="ghost">Home</Button>
            <Button variant="ghost">About</Button>
            <Button color="primary">Sign In</Button>
          </Flex>
        }
      />
    )
}

export default App

带下拉菜单

带有用于其他选项的下拉菜单的导航栏。

import { Navbar, Button, Dropdown, Typography, Flex } from 'asterui'
import { ChevronDownIcon } from '@aster-ui/icons'

function App() {
  return (
      <Navbar
        start={<Typography.Text strong className="text-xl">AsterUI</Typography.Text>}
        end={
          <Flex gap="sm">
            <Button variant="ghost">Home</Button>
            <Dropdown>
              <Dropdown.Trigger>
                <Button variant="ghost">
                  Products
                  <ChevronDownIcon size="sm" className="ml-1" />
                </Button>
              </Dropdown.Trigger>
              <Dropdown.Menu>
                <Dropdown.Item>Product 1</Dropdown.Item>
                <Dropdown.Item>Product 2</Dropdown.Item>
                <Dropdown.Item>Product 3</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
            <Button variant="ghost">About</Button>
            <Button color="primary">Sign In</Button>
          </Flex>
        }
      />
    )
}

export default App

带菜单图标

带有汉堡菜单下拉的导航栏。

import { Navbar, Button, Dropdown, Typography } from 'asterui'

function App() {
  return (
      <Navbar
        start={
          <Dropdown>
            <Dropdown.Trigger>
              <Button variant="ghost" shape="circle">☰</Button>
            </Dropdown.Trigger>
            <Dropdown.Menu>
              <Dropdown.Item>Home</Dropdown.Item>
              <Dropdown.Item>Products</Dropdown.Item>
              <Dropdown.Item>About</Dropdown.Item>
              <Dropdown.Item>Contact</Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
        }
        center={<Typography.Text strong className="text-xl">AsterUI</Typography.Text>}
        end={<Button color="primary">Sign In</Button>}
      />
    )
}

export default App

颜色变体

具有不同背景颜色变体的导航栏。

import { Navbar, Button, Typography, Flex } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="md">
        <Navbar
          color="neutral"
          start={<Typography.Text strong className="text-xl">Neutral</Typography.Text>}
          end={<Button variant="ghost">Action</Button>}
        />
        <Navbar
          color="primary"
          start={<Typography.Text strong className="text-xl">Primary</Typography.Text>}
          end={<Button variant="ghost">Action</Button>}
        />
        <Navbar
          color="secondary"
          start={<Typography.Text strong className="text-xl">Secondary</Typography.Text>}
          end={<Button variant="ghost">Action</Button>}
        />
      </Flex>
    )
}

export default App

带阴影

带有阴影以获得凸起外观的导航栏。

import { Navbar, Button, Typography, Flex } from 'asterui'

function App() {
  return (
      <Navbar
        shadow="md"
        start={<Typography.Text strong className="text-xl">AsterUI</Typography.Text>}
        end={
          <Flex gap="sm">
            <Button variant="ghost">Home</Button>
            <Button color="primary">Sign In</Button>
          </Flex>
        }
      />
    )
}

export default App

圆角

带有圆角以获得更柔和外观的导航栏。

import { Navbar, Button, Typography, Flex } from 'asterui'

function App() {
  return (
      <Navbar
        color="neutral"
        rounded="lg"
        start={<Typography.Text strong className="text-xl">AsterUI</Typography.Text>}
        end={
          <Flex gap="sm">
            <Button variant="ghost">Home</Button>
            <Button color="primary">Sign In</Button>
          </Flex>
        }
      />
    )
}

export default App

API

`Navbar`

属性	描述	类型	默认值
`start`	导航栏开始部分的内容(通常是徽标/品牌)	`React.ReactNode`	-
`center`	导航栏中间部分的内容	`React.ReactNode`	-
`end`	导航栏结束部分的内容(通常是操作/菜单)	`React.ReactNode`	-
`children`	替换三段式布局的自定义内容	`React.ReactNode`	-
`color`	背景颜色变体	`'base' \| 'neutral' \| 'primary' \| 'secondary' \| 'accent'`	`'base'`
`sticky`	使导航栏粘性固定在顶部	`boolean`	`false`
`shadow`	阴影深度	`'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'none'`
`rounded`	边框圆角	`'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'none'`
`className`	额外的 CSS 类	`string`	-

可访问性

使用语义化的 <nav> 元素以获得正确的导航语义
支持所有交互元素的键盘导航
移动菜单按钮应具有屏幕阅读器的描述性标签
为键盘用户保持焦点可见性
下拉菜单遵循菜单模式的 ARIA 最佳实践