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, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/en/components/app-bar.md.
Leaf UIReact components
GitHub

AppBar

Organize navigation at the top and bottom of an application.

Basic usage

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>
  );
}

Bottom navigation

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} /> },
      ]}
    />
  );
}

AppBar API

PropertyTypeDefaultDescription
position'static' | 'sticky' | 'fixed''static'Navigation bar positioning.
elevationboolean—Show a shadow below the bar.

Toolbar API

PropertyTypeDefaultDescription
denseboolean—Use a compact toolbar.

BottomNavigationItem

PropertyTypeDefaultDescription
keystring—Required. Stable, unique identifier.
labelReactNode—Required. Visible label or content.
iconReactNode—Icon content.
disabledboolean—Disable interaction.
hrefstring—Link destination.

BottomNavigation API

PropertyTypeDefaultDescription
itemsreadonly BottomNavigationItem[]—Required. Items to display.
valuestring—Controlled value.
defaultValuestring''Initial value; uncontrolled fields support native form reset.
onChange(value: string) => void—Called when the value changes.
showLabelsbooleantrueAlways show bottom-navigation labels.
linkRender( item: 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.

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.