> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/app-bar.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# AppBar 应用导航

组织应用顶部和底部的导航。

## 基础用法


**Leaf workspace**新建

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/app-bar/basic.tsx"
import { AppBar, Button, Toolbar } from '@ifhover/leaf-ui';

import { Menu, Search } from 'lucide-react';

export function AppBarBasic() {
  return (
    <AppBar elevation>
      <Toolbar>
        <Button
          variant="soft"
          startIcon={<Menu size={18} />}
          aria-label={'菜单'}
        />
        <strong style={{ marginInlineEnd: 'auto' }}>Leaf workspace</strong>
        <Button
          variant="soft"
          startIcon={<Search size={18} />}
          aria-label={'搜索'}
        />
        <Button size="sm">{'新建'}</Button>
      </Toolbar>
    </AppBar>
  );
}
```

展开代码

## 底部导航


首页个人资料设置

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/app-bar/basic.tsx"
import { BottomNavigation } from '@ifhover/leaf-ui';

import { Home, Settings, User } from 'lucide-react';

import { useState } from 'react';

export function AppBarNavigation() {
  const [value, setValue] = useState('home');
  return (
    <BottomNavigation
      style={{ width: '100%', maxWidth: 560 }}
      aria-label={'工作区导航'}
      value={value}
      onChange={setValue}
      items={[
        { key: 'home', label: '首页', icon: <Home size={20} /> },
        { key: 'profile', label: '个人资料', icon: <User size={20} /> },
        { key: 'settings', label: '设置', icon: <Settings size={20} /> },
      ]}
    />
  );
}
```

展开代码

## AppBar API

| 属性          | 类型                                | 默认值        | 说明       |
| ----------- | --------------------------------- | ---------- | -------- |
| `position`  | `'static' \| 'sticky' \| 'fixed'` | `'static'` | 导航栏定位方式。 |
| `elevation` | `boolean`                         | —          | 展示导航栏阴影。 |

## Toolbar API

| 属性      | 类型        | 默认值 | 说明        |
| ------- | --------- | --- | --------- |
| `dense` | `boolean` | —   | 使用紧凑的工具栏。 |

## BottomNavigationItem

| 属性         | 类型          | 默认值 | 说明           |
| ---------- | ----------- | --- | ------------ |
| `key`      | `string`    | —   | 必需。稳定且唯一的标识。 |
| `label`    | `ReactNode` | —   | 必需。展示文字或内容。  |
| `icon`     | `ReactNode` | —   | 图标内容。        |
| `disabled` | `boolean`   | —   | 禁用交互。        |
| `href`     | `string`    | —   | 链接目标。        |

## BottomNavigation API

| 属性             | 类型                                                                                                                          | 默认值    | 说明                     |
| -------------- | --------------------------------------------------------------------------------------------------------------------------- | ------ | ---------------------- |
| `items`        | `readonly `[`BottomNavigationItem`](#bottomnavigationitem)`[]`                                                              | —      | 必需。展示的条目。              |
| `value`        | `string`                                                                                                                    | —      | 受控值。                   |
| `defaultValue` | `string`                                                                                                                    | `''`   | 初始值；非受控模式支持表单重置。       |
| `onChange`     | `(value: string) => void`                                                                                                   | —      | 值发生变化时调用。              |
| `showLabels`   | `boolean`                                                                                                                   | `true` | 始终展示底部导航文字。            |
| `linkRender`   | `( item: `[`BottomNavigationItem`](#bottomnavigationitem)`, props: AnchorHTMLAttributes<HTMLAnchorElement>, ) => ReactNode` | —      | 接入路由链接时保留传入的可访问性和事件属性。 |

## 类型与交互

组装可复用配置时，可导入对应的属性和数据类型。

```ts
import type { AppBarProps, ToolbarProps, BottomNavigationItem, BottomNavigationProps } from '@ifhover/leaf-ui';
```

为仅展示图标的操作提供可访问名称。交互控件支持键盘操作，并跟随 ConfigProvider 的主题和减少动画设置。