"use client";import { Menu } from "@base-ui/react/menu";import { Menubar } from "@base-ui/react/menubar";import { AnimatePresence, motion } from "motion/react";import * as React from "react";const itemClass = (state: { highlighted: boolean }) => `d-f ai-c jc-sb g-4 px-3 py-2 fs-sm us-none c-p br-1 mx-1 ${ state.highlighted ? "bg-silver-1" : "h:bg-silver-1" }`;export default function ExampleMenubar() { const [fileOpen, setFileOpen] = React.useState(false); const [editOpen, setEditOpen] = React.useState(false); const [viewOpen, setViewOpen] = React.useState(false); return ( {/* File Menu */} `h-8 br-1 px-3 fs-sm fw-600 c-slate-10 us-none c-p b-0 bg-transparent ${ state.open ? "bg-silver-1" : "h:bg-silver-1" }` } > File {fileOpen && ( } className="py-1 bg-white bc-silver-2 c-slate-10 br-2 bw-1 bs-o-lg" > New project Open file Save Print )} {/* Edit Menu */} `h-8 br-1 px-3 fs-sm fw-600 c-slate-10 us-none c-p b-0 bg-transparent ${ state.open ? "bg-silver-1" : "h:bg-silver-1" }` } > Edit {editOpen && ( } className="py-1 bg-white bc-silver-2 c-slate-10 br-2 bw-1 bs-o-lg" > Undo action Redo action Cut selection Copy text Paste content )} {/* View Menu */} `h-8 br-1 px-3 fs-sm fw-600 c-slate-10 us-none c-p b-0 bg-transparent ${ state.open ? "bg-silver-1" : "h:bg-silver-1" }` } > View {viewOpen && ( } className="py-1 bg-white bc-silver-2 c-slate-10 br-2 bw-1 bs-o-lg" > Zoom in Zoom out Full screen )} {/* Help Menu (disabled) */} Help );}

Menubar

Installation

Examples

Base

API Reference