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

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

# AppBar

Organize navigation at the top and bottom of an application.

## Basic usage


**Leaf workspace**Create

basic.tsx

Copy code

```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={'Menu'}
        />
        <strong style={{ marginInlineEnd: 'auto' }}>Leaf workspace</strong>
        <Button
          variant="soft"
          startIcon={<Search size={18} />}
          aria-label={'Search'}
        />
        <Button size="sm">{'Create'}</Button>
      </Toolbar>
    </AppBar>
  );
}
```

Expand code

## Bottom navigation


HomeProfileSettings

basic.tsx

Copy code

```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={'Workspace navigation'}
      value={value}
      onChange={setValue}
      items={[
        { key: 'home', label: 'Home', icon: <Home size={20} /> },
        { key: 'profile', label: 'Profile', icon: <User size={20} /> },
        { key: 'settings', label: 'Settings', icon: <Settings size={20} /> },
      ]}
    />
  );
}
```

Expand code

## AppBar API

| Property    | Type                              | Default    | Description                  |
| ----------- | --------------------------------- | ---------- | ---------------------------- |
| `position`  | `'static' \| 'sticky' \| 'fixed'` | `'static'` | Navigation bar positioning.  |
| `elevation` | `boolean`                         | —          | Show a shadow below the bar. |

## Toolbar API

| Property | Type      | Default | Description            |
| -------- | --------- | ------- | ---------------------- |
| `dense`  | `boolean` | —       | Use a compact toolbar. |

## BottomNavigationItem

| Property   | Type        | Default | Description                          |
| ---------- | ----------- | ------- | ------------------------------------ |
| `key`      | `string`    | —       | Required. Stable, unique identifier. |
| `label`    | `ReactNode` | —       | Required. Visible label or content.  |
| `icon`     | `ReactNode` | —       | Icon content.                        |
| `disabled` | `boolean`   | —       | Disable interaction.                 |
| `href`     | `string`    | —       | Link destination.                    |

## BottomNavigation API

| Property       | Type                                                                                                                        | Default | Description                                                                  |
| -------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------- |
| `items`        | `readonly `[`BottomNavigationItem`](#bottomnavigationitem)`[]`                                                              | —       | Required. Items to display.                                                  |
| `value`        | `string`                                                                                                                    | —       | Controlled value.                                                            |
| `defaultValue` | `string`                                                                                                                    | `''`    | Initial value; uncontrolled fields support native form reset.                |
| `onChange`     | `(value: string) => void`                                                                                                   | —       | Called when the value changes.                                               |
| `showLabels`   | `boolean`                                                                                                                   | `true`  | Always show bottom-navigation labels.                                        |
| `linkRender`   | `( item: `[`BottomNavigationItem`](#bottomnavigationitem)`, props: AnchorHTMLAttributes<HTMLAnchorElement>, ) => ReactNode` | —       | Render a router link while retaining supplied accessibility and event props. |

## Types and interaction

Import the props and data types when creating reusable configuration.

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

Provide accessible labels for icon-only actions. Interactive controls support keyboard navigation and respect ConfigProvider themes and reduced motion.