Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Preview

FileEditViewProfiles

Code

import Menubar from '@dinui/react/menubar'

export default function MenubarDemo() {
  return (
    <Menubar>
      <Menubar.Menu>
        <Menubar.Trigger>File</Menubar.Trigger>
        <Menubar.Content>
          <Menubar.Item>
            New Tab <Menubar.Item.Shortcut>⌘T</Menubar.Item.Shortcut>
          </Menubar.Item>
          <Menubar.Item>
            New Window <Menubar.Item.Shortcut>⌘N</Menubar.Item.Shortcut>
          </Menubar.Item>
          <Menubar.Item disabled>New Incognito Window</Menubar.Item>
          <Menubar.Separator />
          <Menubar.Sub>
            <Menubar.Sub.Trigger>Share</Menubar.Sub.Trigger>
            <Menubar.Sub.Content>
              <Menubar.Item>Email link</Menubar.Item>
              <Menubar.Item>Messages</Menubar.Item>
              <Menubar.Item>Notes</Menubar.Item>
            </Menubar.Sub.Content>
          </Menubar.Sub>
          <Menubar.Separator />
          <Menubar.Item>
            Print... <Menubar.Item.Shortcut>⌘P</Menubar.Item.Shortcut>
          </Menubar.Item>
        </Menubar.Content>
      </Menubar.Menu>
      <Menubar.Menu>
        <Menubar.Trigger>Edit</Menubar.Trigger>
        <Menubar.Content>
          <Menubar.Item>
            Undo <Menubar.Item.Shortcut>⌘Z</Menubar.Item.Shortcut>
          </Menubar.Item>
          <Menubar.Item>
            Redo <Menubar.Item.Shortcut>⇧⌘Z</Menubar.Item.Shortcut>
          </Menubar.Item>
          <Menubar.Separator />
          <Menubar.Sub>
            <Menubar.Sub.Trigger>Find</Menubar.Sub.Trigger>
            <Menubar.Sub.Content>
              <Menubar.Item>Search the web</Menubar.Item>
              <Menubar.Separator />
              <Menubar.Item>Find...</Menubar.Item>
              <Menubar.Item>Find Next</Menubar.Item>
              <Menubar.Item>Find Previous</Menubar.Item>
            </Menubar.Sub.Content>
          </Menubar.Sub>
          <Menubar.Separator />
          <Menubar.Item>Cut</Menubar.Item>
          <Menubar.Item>Copy</Menubar.Item>
          <Menubar.Item>Paste</Menubar.Item>
        </Menubar.Content>
      </Menubar.Menu>
      <Menubar.Menu>
        <Menubar.Trigger>View</Menubar.Trigger>
        <Menubar.Content>
          <Menubar.CheckboxItem>Always Show Bookmarks Bar</Menubar.CheckboxItem>
          <Menubar.CheckboxItem checked>Always Show Full URLs</Menubar.CheckboxItem>
          <Menubar.Separator />
          <Menubar.Item inset>
            Reload <Menubar.Item.Shortcut>⌘R</Menubar.Item.Shortcut>
          </Menubar.Item>
          <Menubar.Item disabled inset>
            Force Reload <Menubar.Item.Shortcut>⇧⌘R</Menubar.Item.Shortcut>
          </Menubar.Item>
          <Menubar.Separator />
          <Menubar.Item inset>Toggle Fullscreen</Menubar.Item>
          <Menubar.Separator />
          <Menubar.Item inset>Hide Sidebar</Menubar.Item>
        </Menubar.Content>
      </Menubar.Menu>
      <Menubar.Menu>
        <Menubar.Trigger>Profiles</Menubar.Trigger>
        <Menubar.Content>
          <Menubar.Radio value="benoit">
            <Menubar.Radio.Item value="andy">Andy</Menubar.Radio.Item>
            <Menubar.Radio.Item value="benoit">Benoit</Menubar.Radio.Item>
            <Menubar.Radio.Item value="Luis">Luis</Menubar.Radio.Item>
          </Menubar.Radio>
          <Menubar.Separator />
          <Menubar.Item inset>Edit...</Menubar.Item>
          <Menubar.Separator />
          <Menubar.Item inset>Add Profile...</Menubar.Item>
        </Menubar.Content>
      </Menubar.Menu>
    </Menubar>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add menubar

   yarn

   yarn dlx @dinui/cli@latest add menubar

   pnpm

   pnpm dlx @dinui/cli@latest add menubar

   bun

   bunx @dinui/cli@latest add menubar

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-menubar @tabler/icons-react tailwind-variants tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-menubar @tabler/icons-react tailwind-variants tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-menubar @tabler/icons-react tailwind-variants tailwind-variants type-fest

   bun

   bun add @radix-ui/react-menubar @tabler/icons-react tailwind-variants tailwind-variants type-fest

3. Copy and paste the following code into your project

   'use client'
   
   import { button } from '@dinui/react/button'
   import { dropdownMenu } from '@dinui/react/dropdown-menu'
   import * as MenubarPrimitive from '@radix-ui/react-menubar'
   import { IconCheck, IconChevronRight, IconPoint } from '@tabler/icons-react'
   import { forwardRef } from 'react'
   import type { VariantProps } from 'tailwind-variants'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const menubar = tv({
     slots: {
       root: 'flex h-9 items-center gap-1 rounded-md border bg-white p-1 shadow-sm',
       trigger: button({ variant: 'ghost', size: 'xs' }).root({
         className: ['text-sm font-medium px-3 rounded-sm', 'data-[state=open]:bg-bg--active'],
       }),
     },
   })
   
   const MenubarRoot = forwardRef<
     React.ElementRef<typeof MenubarPrimitive.Root>,
     React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
   >((props, ref) => {
     const { root } = menubar()
   
     return (
       <MenubarPrimitive.Root {...props} ref={ref} className={root({ className: props.className })} />
     )
   })
   MenubarRoot.displayName = MenubarPrimitive.Root.displayName
   
   const MenubarTrigger = forwardRef<
     React.ElementRef<typeof MenubarPrimitive.Trigger>,
     React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
   >((props, ref) => {
     const { trigger } = menubar()
   
     return (
       <MenubarPrimitive.Trigger
         {...props}
         ref={ref}
         className={trigger({ className: props.className })}
       />
     )
   })
   MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
   
   const MenubarSubTrigger = forwardRef<
     React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
     Merge<
       Merge<
         React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger>,
         VariantProps<typeof dropdownMenu>
       >,
       {
         iconProps?: React.ComponentProps<typeof IconChevronRight>
       }
     >
   >(({ iconProps, inset, children, ...props }, ref) => {
     const { subTrigger, subTriggerIcon } = dropdownMenu({ inset })
   
     return (
       <MenubarPrimitive.SubTrigger
         {...props}
         ref={ref}
         className={subTrigger({ className: props.className })}
       >
         {children}
   
         <IconChevronRight
           {...iconProps}
           className={subTriggerIcon({ className: iconProps?.className })}
         />
       </MenubarPrimitive.SubTrigger>
     )
   })
   MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
   
   const MenubarSubContent = forwardRef<
     React.ElementRef<typeof MenubarPrimitive.SubContent>,
     Merge<
       React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>,
       {
         portalProps?: React.ComponentProps<typeof MenubarPrimitive.Portal>
       }
     >
   >(({ portalProps, ...props }, ref) => {
     const { subContent } = dropdownMenu()
   
     return (
       <MenubarPrimitive.Portal {...portalProps}>
         <MenubarPrimitive.SubContent
           {...props}
           ref={ref}
           className={subContent({ className: props.className })}
         />
       </MenubarPrimitive.Portal>
     )
   })
   MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
   
   const MenubarContent = forwardRef<
     React.ElementRef<typeof MenubarPrimitive.Content>,
     Merge<
       React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>,
       {
         portalProps?: React.ComponentProps<typeof MenubarPrimitive.Portal>
       }
     >
   >(({ portalProps, ...props }, ref) => {
     const { content } = dropdownMenu()
   
     return (
       <MenubarPrimitive.Portal {...portalProps}>
         <MenubarPrimitive.Content
           align="start"
           alignOffset={-4}
           sideOffset={8}
           {...props}
           ref={ref}
           className={content({ className: props.className })}
         />
       </MenubarPrimitive.Portal>
     )
   })
   MenubarContent.displayName = MenubarPrimitive.Content.displayName
   
   const MenubarItem = forwardRef<
     React.ElementRef<typeof MenubarPrimitive.Item>,
     Merge<
       React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>,
       VariantProps<typeof dropdownMenu>
     >
   >(({ inset, ...props }, ref) => {
     const { item } = dropdownMenu({ inset })
   
     return (
       <MenubarPrimitive.Item {...props} ref={ref} className={item({ className: props.className })} />
     )
   })
   MenubarItem.displayName = MenubarPrimitive.Item.displayName
   
   const MenubarCheckboxItem = forwardRef<
     React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
     Merge<
       React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>,
       {
         indicatorIconProps?: React.ComponentProps<typeof IconCheck>
       }
     >
   >(({ indicatorIconProps, children, ...props }, ref) => {
     const { checkboxItem, checkboxItemIndicatorIcon } = dropdownMenu()
   
     return (
       <MenubarPrimitive.CheckboxItem
         {...props}
         ref={ref}
         className={checkboxItem({ className: props.className })}
       >
         <MenubarPrimitive.ItemIndicator asChild>
           <IconCheck
             {...indicatorIconProps}
             className={checkboxItemIndicatorIcon({ className: indicatorIconProps?.className })}
           />
         </MenubarPrimitive.ItemIndicator>
   
         {children}
       </MenubarPrimitive.CheckboxItem>
     )
   })
   MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
   
   const MenubarRadioItem = forwardRef<
     React.ElementRef<typeof MenubarPrimitive.RadioItem>,
     Merge<
       React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>,
       {
         indicatorIconProps?: React.ComponentProps<typeof IconPoint>
       }
     >
   >(({ indicatorIconProps, children, ...props }, ref) => {
     const { radioItem, radioItemIndicatorIcon } = dropdownMenu()
   
     return (
       <MenubarPrimitive.RadioItem
         {...props}
         ref={ref}
         className={radioItem({ className: props.className })}
       >
         <MenubarPrimitive.ItemIndicator asChild>
           <IconPoint
             {...indicatorIconProps}
             className={radioItemIndicatorIcon({ className: indicatorIconProps?.className })}
           />
         </MenubarPrimitive.ItemIndicator>
   
         {children}
       </MenubarPrimitive.RadioItem>
     )
   })
   MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
   
   const MenubarLabel = forwardRef<
     React.ElementRef<typeof MenubarPrimitive.Label>,
     Merge<
       React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label>,
       VariantProps<typeof dropdownMenu>
     >
   >(({ inset, ...props }, ref) => {
     const { label } = dropdownMenu({ inset })
   
     return (
       <MenubarPrimitive.Label
         {...props}
         ref={ref}
         className={label({ className: props.className })}
       />
     )
   })
   MenubarLabel.displayName = MenubarPrimitive.Label.displayName
   
   const MenubarSeparator = forwardRef<
     React.ElementRef<typeof MenubarPrimitive.Separator>,
     React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
   >((props, ref) => {
     const { separator } = dropdownMenu()
   
     return (
       <MenubarPrimitive.Separator
         {...props}
         ref={ref}
         className={separator({ className: props.className })}
       />
     )
   })
   MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
   
   function MenubarItemShortcut(props: React.ComponentProps<'span'>) {
     const { itemShortcut } = dropdownMenu()
   
     return <span {...props} className={itemShortcut({ className: props.className })} />
   }
   
   const Menubar = Object.assign(MenubarRoot, {
     Menu: MenubarPrimitive.Menu,
     Trigger: MenubarTrigger,
     Content: MenubarContent,
     Group: MenubarPrimitive.Group,
     Separator: MenubarSeparator,
     Label: MenubarLabel,
   
     Item: Object.assign(MenubarItem, {
       Shortcut: MenubarItemShortcut,
     }),
   
     Radio: Object.assign(MenubarPrimitive.RadioGroup, {
       Item: MenubarRadioItem,
     }),
   
     CheckboxItem: MenubarCheckboxItem,
   
     Sub: Object.assign(MenubarPrimitive.Sub, {
       Trigger: MenubarSubTrigger,
       Content: MenubarSubContent,
     }),
   })
   
   export default Menubar
   export { menubar, MenubarPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.