For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/app-bar.md.
Leaf UI
  • English

      • 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="ghost"
          startIcon={<Menu size={18} />}
          aria-label={'Menu'}
        />
        <strong style={{ marginInlineEnd: 'auto' }}>Leaf workspace</strong>
        <Button
          variant="ghost"
          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.