Nav Bar

Import#

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

NavBar is a compound component that consists of multiple parts.

• ​
  Navbar.Root: A container for all the parts of the nav bar.
• ​
  Navbar.Item: An item for a single action.
• ​
  Navbar.ItemLabel: An optional wrapper for item's textual label.

Examples#

Basic#

NavBar is a horizontal navigation bar that should be used to move between major areas of your application.

It is a responsive component that adapts to the available horizontal space. When there is not enough space, nav bar items that don't fit will be added into an overflow disclosure menu. The active item will remain visible to communicate the current context to the user.

Sizes#

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

Controlled state#

By default NavBar works in an uncontrolled way, managing its own state internally. Use defaultActiveItem prop to set the initial active item.

If you need to control the active item state, you should pass your own state to activeItem prop. onActiveItemChange handler is called when the active item changes, allowing you to sync state.

Decorators#

Use startElement and endElement props to add custom elements to the start and end of the NavBar.Item.

These are useful for providing an Icon that visually represents and supports the item or adding a Label to the item.

Disabled items#

You can disable an item by passing isDisabled prop. Disabled items are not focusable and cannot be activated.

With app frame#

Use NavBar with App Frame component to provide the structure for the application navigation.

NavBar should be placed below the application header and directly above the content it affects.

With fixed item#

You can use fixedStartItem or fixedEndItem prop to render a fixed item to the left or right side of the nav bar. This item remains visible and accessible at all times, even if the rest of the navigation items overflow.

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 NavBar.Item via a custom component:

import { Link, useLocation } from 'react-router-dom';
import { NavBar } from '@volue/wave-react';

function NavBarItem({ to, ...delegated }) {
  const pathname = typeof to === 'string' ? to : to.pathname || '';

  return <NavBar.Item as={Link} to={to} id={pathname} {...delegated} />;
}

function App() {
  const location = useLocation();

  const [activeItem, setActiveItem] = useState(() => location.pathname);

  return (
    <Navbar.Root activeItem={activeItem} onActiveItemChange={setActiveItem}>
      <NavBarItem to="/" startElement={<SvgIcon iconName="home" />}>
        {'Home'}
      </NavBarItem>
      <NavBarItem to="/dashboard" startElement={<SvgIcon iconName="layout" />}>
        {'Dashboard'}
      </NavBarItem>
      <NavBarItem to="/map" startElement={<SvgIcon iconName="globe2" />}>
        {'Map'}
      </NavBarItem>
    </Navbar.Root>
  );
}

Accessibility#

• ​

  NavBar is <nav> navigation landmark region​ and can accept the aria-label attribute.

• ​

  The active item is conveyed to assistive technologies using the aria-current attribute.

• ​

  Each item can be reached using the Tab key and activated by using the Enter key.

API Reference#

Navbar.Root#

Navbar.Item#

Navbar.ItemLabel#