App Bar

Import#

import { AppBar } from '@volue/wave-react';

AppBar is a compound component that consists of multiple parts.

• ​
  AppBar.Root: The root component that wraps the entire app bar.
• ​
  AppBar.Logo: The logo component that displays the logo of the application.
• ​
  AppBar.Items: The component that wraps the items in the app bar.
• ​
  AppBar.Item: The individual item component that represents a single item in the app bar.

Examples#

Basic#

The app bar is a vertical navigation component that provides high-level navigation between distinct applications within a suite, or between the core modules of a single application. It is best suited for scenarios where users need to switch between major sections or products, rather than for navigating between pages or features within a single module.

Sizes#

AppBar comes in two sizes: medium and small. By default, it uses medium size.

Items overflow#

When the number of items in the app bar exceeds the available vertical space, the app bar automatically becomes scrollable. Users can scroll to access items that are not immediately visible.

Additionally, when an item is set as active using isActive property, the app bar will automatically scroll to bring the active item into view.

Custom SVG icon#

AppBar.Item accepts subset of SVG Icon props, so you can reference any icon from our set via the iconName property. You can also provide your own SVG path data via the pathData property to display a custom icon. For full control, you can even pass a custom SVG element as a child of AppBar.Item.

With app frame#

To integrate the AppBar seamlessly into your application's layout, use it in conjunction with App Frame component. The AppFrame.AppBar provides a dedicated slot for placing the AppBar.

With routing#

If you need to use the Link component provided by your routing package (e.g. React Router​ or Next.js​), it's recommended to compose it with AppBar.Item via a custom component:

import { Link, useMatch, useResolvedPath } from 'react-router-dom';
import { AppBar } from '@volue/wave-react';

function AppBarItem({ to, ...props }) {
  const resolved = useResolvedPath(to);
  const isActive = Boolean(useMatch({ path: resolved.pathname, end: true }));

  return <AppBar.Item as={Link} to={to} isActive={isActive} {...props} />;
}

function App() {
  return (
    <AppBar.Root>
      <AppBar.Logo />
      <AppBar.Items>
        <AppBarItem iconName="layout" label="Dashboard" to="/dashboard" />
        <AppBarItem iconName="heart" label="Favorites" to="/favorites" />
        <AppBarItem iconName="pin" label="Maps" to="/maps" />
        <AppBarItem iconName="settings" label="Settings" to="/settings" />
      </AppBar.Items>
    </AppBar.Root>
  );
}

API Reference#

AppBar.Root#

AppBar.Logo#

AppBar.Items#

AppBar.Item#