"use client"

import * as React from "react"

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/registry/ui/menubar/menubar"

export default function MenubarBasicDemo() {
  const [ghostEchoes, setGhostEchoes] = React.useState(true)
  const [gain, setGain] = React.useState("medium")

  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>Station</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New transmission</MenubarItem>
          <MenubarItem>Open uplink</MenubarItem>
          <MenubarSub>
            <MenubarSubTrigger>Export log</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>As waveform</MenubarItem>
              <MenubarItem>As transcript</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem variant="destructive">Power down station</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Array</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Retune antennas</MenubarItem>
          <MenubarSeparator />
          <MenubarRadioGroup value={gain} onValueChange={setGain}>
            <MenubarRadioItem value="low">Low gain</MenubarRadioItem>
            <MenubarRadioItem value="medium">Medium gain</MenubarRadioItem>
            <MenubarRadioItem value="high">High gain</MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Logs</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Tail live feed</MenubarItem>
          <MenubarItem>Clear buffer</MenubarItem>
          <MenubarSeparator />
          <MenubarCheckboxItem
            checked={ghostEchoes}
            onCheckedChange={setGhostEchoes}
          >
            Show ghost echoes
          </MenubarCheckboxItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
prop	type	default
disabled	boolean	false
loopFocus	boolean	true
Draw

Playground

Examples

Props
