Menubar

Horizontal bar of menus, each opening a dropdown of items.

FileEdit

New File

Open…

Save

Web preview — components render natively on iOS & Android

import { Menubar, MenubarMenu, MenubarItem } from "@/components/ui/menubar";

export function MyScreen() {
return (
  <Menubar>
    <MenubarMenu trigger="File">
      <MenubarItem onPress={() => {}}>New File</MenubarItem>
      <MenubarItem onPress={() => {}}>Open…</MenubarItem>
      <MenubarItem onPress={() => {}}>Save</MenubarItem>
    </MenubarMenu>
    <MenubarMenu trigger="Edit">
      <MenubarItem onPress={() => {}}>Undo</MenubarItem>
      <MenubarItem onPress={() => {}}>Redo</MenubarItem>
    </MenubarMenu>
  </Menubar>
);
}

Installation

npx @aniui/cli add menubar

Usage

import { Menubar, MenubarMenu, MenubarItem } from "@/components/ui/menubar";

export function MyScreen() {
  return (
    <Menubar>
      <MenubarMenu trigger="File">
        <MenubarItem onPress={() => {}}>New File</MenubarItem>
        <MenubarItem onPress={() => {}}>Save</MenubarItem>
      </MenubarMenu>
      <MenubarMenu trigger="Edit">
        <MenubarItem onPress={() => {}}>Undo</MenubarItem>
      </MenubarMenu>
    </Menubar>
  );
}

Props

Menubar

PropTypeDefault

children

React.ReactNode

—

className

string

—

Also accepts all View props from React Native.

MenubarMenu

PropTypeDefault

trigger

React.ReactNode

—

children

React.ReactNode

—

className

string

—

MenubarItem

PropTypeDefault

onPress

() => void

—

children

React.ReactNode

—

className

string

—

Also accepts all Pressable props from React Native.

Accessibility

Menubar uses accessibilityRole="menubar".
Triggers and items use accessibilityRole="menuitem"; the open panel uses accessibilityRole="menu".

Previous← Masked Input NextNumber Input →