@radix-ui/react-menubar

What is @radix-ui/react-menubar?

@radix-ui/react-menubar is a React component library for building accessible and customizable menubar interfaces. It provides a set of components and hooks to create complex menubar structures with ease, ensuring accessibility and usability.

What are @radix-ui/react-menubar's main functionalities?

Basic Menubar

This code demonstrates how to create a basic menubar with 'File' and 'Edit' menus, each containing several items.

```jsx
import { Menubar, MenubarItem, MenubarTrigger, MenubarContent } from '@radix-ui/react-menubar';

function BasicMenubar() {
  return (
    <Menubar>
      <MenubarItem>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New</MenubarItem>
          <MenubarItem>Open</MenubarItem>
          <MenubarItem>Save</MenubarItem>
        </MenubarContent>
      </MenubarItem>
      <MenubarItem>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Undo</MenubarItem>
          <MenubarItem>Redo</MenubarItem>
        </MenubarContent>
      </MenubarItem>
    </Menubar>
  );
}
```

Nested Menubar

This code demonstrates how to create a nested menubar with a 'File' menu that contains an 'Export' submenu with 'PDF' and 'Word' options.

```jsx
import { Menubar, MenubarItem, MenubarTrigger, MenubarContent } from '@radix-ui/react-menubar';

function NestedMenubar() {
  return (
    <Menubar>
      <MenubarItem>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New</MenubarItem>
          <MenubarItem>Open</MenubarItem>
          <MenubarItem>
            <MenubarTrigger>Export</MenubarTrigger>
            <MenubarContent>
              <MenubarItem>PDF</MenubarItem>
              <MenubarItem>Word</MenubarItem>
            </MenubarContent>
          </MenubarItem>
        </MenubarContent>
      </MenubarItem>
    </Menubar>
  );
}
```

Custom Styling

This code demonstrates how to apply custom styling to the menubar and its items using CSS classes.

```jsx
import { Menubar, MenubarItem, MenubarTrigger, MenubarContent } from '@radix-ui/react-menubar';
import './customStyles.css';

function CustomStyledMenubar() {
  return (
    <Menubar className="custom-menubar">
      <MenubarItem className="custom-menubar-item">
        <MenubarTrigger className="custom-menubar-trigger">File</MenubarTrigger>
        <MenubarContent className="custom-menubar-content">
          <MenubarItem className="custom-menubar-item">New</MenubarItem>
          <MenubarItem className="custom-menubar-item">Open</MenubarItem>
        </MenubarContent>
      </MenubarItem>
    </Menubar>
  );
}
```

Other packages similar to @radix-ui/react-menubar

react-menu

react-menu is a lightweight, accessible, and customizable menu component for React. It provides similar functionality to @radix-ui/react-menubar but focuses on simplicity and ease of use. It may not offer as many built-in accessibility features as @radix-ui/react-menubar.

react-aria-menubutton

react-aria-menubutton is a React component for creating accessible menu buttons. It is highly focused on accessibility and provides a straightforward API for creating menu buttons. However, it may require more manual setup compared to @radix-ui/react-menubar.

react-bootstrap

react-bootstrap is a popular library that provides Bootstrap components for React, including dropdown menus. While it offers a wide range of components and is easy to use, it is more heavyweight and less focused on accessibility compared to @radix-ui/react-menubar.

README

react-menubar

Installation

$ yarn add @radix-ui/react-menubar
# or
$ npm install @radix-ui/react-menubar

Usage

View docs here.