> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Menubar

> An application-style horizontal menu bar with dropdown menus — modeled after native desktop app menu bars (File, Edit, View).

## Overview

<div style={{padding:"28px 24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb"}}>
  <div style={{fontFamily:"Inter,sans-serif"}}>
    <div style={{display:"flex",alignItems:"center",gap:"2px",background:"#fff",border:"1px solid #E5E7EB",borderRadius:"8px",padding:"4px",width:"fit-content"}}>
      {["File","Edit","View","Help"].map((menu,i) => (
                  <div key={menu} style={{padding:"5px 10px",borderRadius:"6px",fontSize:"13px",fontWeight:500,color:i===0?"#0479CE":"#344054",background:i===0?"#EFF8FF":"transparent",cursor:"pointer"}}>{menu}</div>
                ))}
    </div>

    <div style={{marginTop:"8px",background:"#fff",border:"1px solid #E5E7EB",borderRadius:"10px",boxShadow:"0 4px 16px rgba(0,0,0,0.1)",padding:"4px",width:"200px"}}>
      {[
                  {label:"New Tab",shortcut:"⌘T"},
                  {label:"New Window",shortcut:"⌘N"},
                  {label:"New Incognito Window",shortcut:"⇧⌘N"},
                ].map(item => (
                  <div key={item.label} style={{padding:"7px 10px",display:"flex",alignItems:"center",justifyContent:"space-between",fontSize:"13px",color:"#344054",borderRadius:"6px",cursor:"pointer"}}>
                    <span>{item.label}</span>
                    <kbd style={{fontSize:"11px",color:"#9CA3AF"}}>{item.shortcut}</kbd>
                  </div>
                ))}

      <div style={{height:"1px",background:"#F2F4F7",margin:"4px 0"}} />

      <div style={{padding:"7px 10px",display:"flex",alignItems:"center",justifyContent:"space-between",fontSize:"13px",color:"#344054",borderRadius:"6px",cursor:"pointer"}}>
        <span>Print</span>
        <kbd style={{fontSize:"11px",color:"#9CA3AF"}}>⌘P</kbd>
      </div>
    </div>
  </div>
</div>

**Menubar** is a horizontal menu bar — the same pattern found in desktop applications like VS Code, Chrome, and Figma. It exposes top-level menus (File, Edit, View) that open dropdown panels on click.

***

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @araf-ds/core
  ```

  ```bash yarn theme={null}
  yarn add @araf-ds/core
  ```

  ```bash pnpm theme={null}
  pnpm add @araf-ds/core
  ```
</CodeGroup>

***

## Usage

```tsx theme={null}
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarLabel,
} from "@araf-ds/core"

export default function Example() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
          <MenubarItem>New Window <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Print <MenubarShortcut>⌘P</MenubarShortcut></MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
          <MenubarItem>Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Cut <MenubarShortcut>⌘X</MenubarShortcut></MenubarItem>
          <MenubarItem>Copy <MenubarShortcut>⌘C</MenubarShortcut></MenubarItem>
          <MenubarItem>Paste <MenubarShortcut>⌘V</MenubarShortcut></MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem checked>Show Sidebar</MenubarCheckboxItem>
          <MenubarCheckboxItem>Show Toolbar</MenubarCheckboxItem>
          <MenubarSeparator />
          <MenubarRadioGroup value="100%">
            <MenubarLabel>Zoom</MenubarLabel>
            <MenubarRadioItem value="75%">75%</MenubarRadioItem>
            <MenubarRadioItem value="100%">100%</MenubarRadioItem>
            <MenubarRadioItem value="125%">125%</MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
```

***

## API Reference

### MenubarItem

<ParamField path="disabled" type="boolean" default="false">
  Disables the item.
</ParamField>

<ParamField path="onSelect" type="() => void">
  Callback fired on selection. Menu closes automatically.
</ParamField>

### MenubarCheckboxItem

<ParamField path="checked" type="boolean">
  Controlled checked state.
</ParamField>

<ParamField path="onCheckedChange" type="(checked: boolean) => void">
  Callback when checked state changes.
</ParamField>

### MenubarRadioGroup / MenubarRadioItem

<ParamField path="value" type="string">
  Selected radio value (on group) or item value.
</ParamField>

<ParamField path="onValueChange" type="(value: string) => void">
  Callback when radio selection changes.
</ParamField>

***

## Accessibility

* Menubar uses `role="menubar"` with `aria-orientation="horizontal"`
* Each `MenubarMenu` trigger has `role="menuitem"` and `aria-haspopup="menu"`
* Keyboard: Left/Right arrows move between top-level triggers; Down/Enter opens the dropdown; Escape closes
* When a menu is open, Up/Down navigate items and Left/Right move to adjacent top-level menus

***

## Do's & Don'ts

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * Use Menubar for desktop-class web applications (editors, dashboards, IDEs)
    * Include keyboard shortcuts in `MenubarShortcut` to match native app conventions
    * Group related actions with `MenubarSeparator` and `MenubarLabel`
    * Limit top-level menus to 4–6 items
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * Don't use Menubar on mobile-first products — use a bottom sheet or hamburger menu
    * Don't duplicate the same actions in both Menubar and a Toolbar — pick one
    * Don't use for simple single-level navigation — use `Tabs` or `Sidebar`
    * Don't nest sub-menus more than 2 levels deep
  </Card>
</CardGroup>