Menubar

1import {2  Menubar,3  MenubarContent,4  MenubarGroup,5  MenubarItem,6  MenubarMenu,7  MenubarSeparator,8  MenubarShortcut,9  MenubarTrigger,10} from "@/components/ui/menubar"1112function RefreshIcon({ className }: { className?: string }) {13  return (14    <svg15      viewBox="0 0 24 24"16      fill="none"17      stroke="currentColor"18      strokeWidth="2"19      strokeLinecap="round"20      strokeLinejoin="round"21      aria-hidden="true"22      className={className}23    >24      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />25      <path d="M21 3v5h-5" />26      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />27      <path d="M8 16H3v5" />28    </svg>29  )30}3132function MaximizeIcon({ className }: { className?: string }) {33  return (34    <svg35      viewBox="0 0 24 24"36      fill="none"37      stroke="currentColor"38      strokeWidth="2"39      strokeLinecap="round"40      strokeLinejoin="round"41      aria-hidden="true"42      className={className}43    >44      <path d="M8 3H5a2 2 0 0 0-2 2v3" />45      <path d="M21 8V5a2 2 0 0 0-2-2h-3" />46      <path d="M3 16v3a2 2 0 0 0 2 2h3" />47      <path d="M16 21h3a2 2 0 0 0 2-2v-3" />48    </svg>49  )50}5152export function Example() {53  return (54    <Menubar>55      <MenubarMenu>56        <MenubarTrigger>File</MenubarTrigger>57        <MenubarContent>58          <MenubarGroup>59            <MenubarItem>60              New Tab <MenubarShortcut>⌘T</MenubarShortcut>61            </MenubarItem>62            <MenubarItem>New Window</MenubarItem>63          </MenubarGroup>64          <MenubarSeparator />65          <MenubarGroup>66            <MenubarItem>Share</MenubarItem>67            <MenubarItem>Print</MenubarItem>68          </MenubarGroup>69        </MenubarContent>70      </MenubarMenu>71      <MenubarMenu>72        <MenubarTrigger>Edit</MenubarTrigger>73        <MenubarContent>74          <MenubarItem>75            Undo <MenubarShortcut>⌘Z</MenubarShortcut>76          </MenubarItem>77          <MenubarItem>78            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>79          </MenubarItem>80          <MenubarSeparator />81          <MenubarItem>Cut</MenubarItem>82          <MenubarItem>Copy</MenubarItem>83          <MenubarItem>Paste</MenubarItem>84        </MenubarContent>85      </MenubarMenu>86      <MenubarMenu>87        <MenubarTrigger>View</MenubarTrigger>88        <MenubarContent>89          <MenubarItem>90            <RefreshIcon />91            Reload92          </MenubarItem>93          <MenubarItem disabled>94            <RefreshIcon />95            Force Reload96          </MenubarItem>97          <MenubarSeparator />98          <MenubarItem>99            <MaximizeIcon />100            Toggle Fullscreen101          </MenubarItem>102        </MenubarContent>103      </MenubarMenu>104      <MenubarMenu>105        <MenubarTrigger>Profiles</MenubarTrigger>106        <MenubarContent>107          <MenubarItem>Alex</MenubarItem>108          <MenubarItem>Jordan</MenubarItem>109          <MenubarItem>Sam</MenubarItem>110          <MenubarSeparator />111          <MenubarItem>Edit…</MenubarItem>112          <MenubarSeparator />113          <MenubarItem>Add Profile…</MenubarItem>114        </MenubarContent>115      </MenubarMenu>116    </Menubar>117  )118}

1"use client"23import { useState } from "react"4import {5  Menubar,6  MenubarCheckboxItem,7  MenubarContent,8  MenubarLabel,9  MenubarMenu,10  MenubarSeparator,11  MenubarTrigger,12} from "@/components/ui/menubar"1314export function Example() {15  const [showBookmarks, setShowBookmarks] = useState(true)16  const [showUrls, setShowUrls] = useState(false)17  const [wrapLines, setWrapLines] = useState(true)18  const [showWhitespace, setShowWhitespace] = useState(false)1920  return (21    <Menubar>22      <MenubarMenu>23        <MenubarTrigger>View</MenubarTrigger>24        <MenubarContent>25          <MenubarLabel>Appearance</MenubarLabel>26          <MenubarSeparator />27          <MenubarCheckboxItem28            checked={showBookmarks}29            onCheckedChange={setShowBookmarks}30          >31            Show Bookmarks Bar32          </MenubarCheckboxItem>33          <MenubarCheckboxItem checked={showUrls} onCheckedChange={setShowUrls}>34            Show Full URLs35          </MenubarCheckboxItem>36        </MenubarContent>37      </MenubarMenu>38      <MenubarMenu>39        <MenubarTrigger>Format</MenubarTrigger>40        <MenubarContent>41          <MenubarCheckboxItem42            checked={wrapLines}43            onCheckedChange={setWrapLines}44          >45            Wrap Lines46          </MenubarCheckboxItem>47          <MenubarCheckboxItem48            checked={showWhitespace}49            onCheckedChange={setShowWhitespace}50          >51            Show Whitespace52          </MenubarCheckboxItem>53        </MenubarContent>54      </MenubarMenu>55    </Menubar>56  )57}

1"use client"23import { useState } from "react"4import {5  Menubar,6  MenubarContent,7  MenubarLabel,8  MenubarMenu,9  MenubarRadioGroup,10  MenubarRadioItem,11  MenubarSeparator,12  MenubarTrigger,13} from "@/components/ui/menubar"1415export function Example() {16  const [profile, setProfile] = useState("alex")17  const [theme, setTheme] = useState("system")1819  return (20    <Menubar>21      <MenubarMenu>22        <MenubarTrigger>Profiles</MenubarTrigger>23        <MenubarContent>24          <MenubarLabel>Account</MenubarLabel>25          <MenubarSeparator />26          <MenubarRadioGroup value={profile} onValueChange={setProfile}>27            <MenubarRadioItem value="alex">Alex</MenubarRadioItem>28            <MenubarRadioItem value="jordan">Jordan</MenubarRadioItem>29            <MenubarRadioItem value="sam">Sam</MenubarRadioItem>30          </MenubarRadioGroup>31        </MenubarContent>32      </MenubarMenu>33      <MenubarMenu>34        <MenubarTrigger>Theme</MenubarTrigger>35        <MenubarContent>36          <MenubarRadioGroup value={theme} onValueChange={setTheme}>37            <MenubarRadioItem value="light">Light</MenubarRadioItem>38            <MenubarRadioItem value="dark">Dark</MenubarRadioItem>39            <MenubarRadioItem value="system">System</MenubarRadioItem>40          </MenubarRadioGroup>41        </MenubarContent>42      </MenubarMenu>43    </Menubar>44  )45}

1import {2  Menubar,3  MenubarContent,4  MenubarItem,5  MenubarMenu,6  MenubarSeparator,7  MenubarShortcut,8  MenubarSub,9  MenubarSubContent,10  MenubarSubTrigger,11  MenubarTrigger,12} from "@/components/ui/menubar"1314export function Example() {15  return (16    <Menubar>17      <MenubarMenu>18        <MenubarTrigger>File</MenubarTrigger>19        <MenubarContent>20          <MenubarItem>21            New Tab <MenubarShortcut>⌘T</MenubarShortcut>22          </MenubarItem>23          <MenubarSub>24            <MenubarSubTrigger>Share</MenubarSubTrigger>25            <MenubarSubContent>26              <MenubarItem>Email link</MenubarItem>27              <MenubarItem>Messages</MenubarItem>28              <MenubarItem>Notes</MenubarItem>29            </MenubarSubContent>30          </MenubarSub>31          <MenubarSeparator />32          <MenubarItem>Print…</MenubarItem>33        </MenubarContent>34      </MenubarMenu>35      <MenubarMenu>36        <MenubarTrigger>Edit</MenubarTrigger>37        <MenubarContent>38          <MenubarItem>Find…</MenubarItem>39          <MenubarSub>40            <MenubarSubTrigger>Find</MenubarSubTrigger>41            <MenubarSubContent>42              <MenubarItem>Search the web…</MenubarItem>43              <MenubarSeparator />44              <MenubarItem>Find…</MenubarItem>45              <MenubarItem>Find Next</MenubarItem>46              <MenubarItem>Find Previous</MenubarItem>47            </MenubarSubContent>48          </MenubarSub>49        </MenubarContent>50      </MenubarMenu>51    </Menubar>52  )53}

1import {2  Menubar,3  MenubarContent,4  MenubarItem,5  MenubarMenu,6  MenubarSeparator,7  MenubarShortcut,8  MenubarTrigger,9} from "@/components/ui/menubar"1011function FileIcon({ className }: { className?: string }) {12  return (13    <svg14      viewBox="0 0 24 24"15      fill="none"16      stroke="currentColor"17      strokeWidth="2"18      strokeLinecap="round"19      strokeLinejoin="round"20      aria-hidden="true"21      className={className}22    >23      <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />24      <path d="M14 2v4a2 2 0 0 0 2 2h4" />25    </svg>26  )27}2829function FolderIcon({ className }: { className?: string }) {30  return (31    <svg32      viewBox="0 0 24 24"33      fill="none"34      stroke="currentColor"35      strokeWidth="2"36      strokeLinecap="round"37      strokeLinejoin="round"38      aria-hidden="true"39      className={className}40    >41      <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9l-.81-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />42    </svg>43  )44}4546function MoreHorizontalIcon({ className }: { className?: string }) {47  return (48    <svg49      viewBox="0 0 24 24"50      fill="none"51      stroke="currentColor"52      strokeWidth="2"53      strokeLinecap="round"54      strokeLinejoin="round"55      aria-hidden="true"56      className={className}57    >58      <circle cx="12" cy="12" r="1" />59      <circle cx="19" cy="12" r="1" />60      <circle cx="5" cy="12" r="1" />61    </svg>62  )63}6465export function Example() {66  return (67    <Menubar>68      <MenubarMenu>69        <MenubarTrigger>File</MenubarTrigger>70        <MenubarContent>71          <MenubarItem>72            <FileIcon />73            New File74            <MenubarShortcut>⌘N</MenubarShortcut>75          </MenubarItem>76          <MenubarItem>77            <FolderIcon />78            New Folder79          </MenubarItem>80          <MenubarSeparator />81          <MenubarItem>82            <MoreHorizontalIcon />83            More…84          </MenubarItem>85        </MenubarContent>86      </MenubarMenu>87      <MenubarMenu>88        <MenubarTrigger>More</MenubarTrigger>89        <MenubarContent>90          <MenubarItem>91            <MoreHorizontalIcon />92            Preferences93          </MenubarItem>94        </MenubarContent>95      </MenubarMenu>96    </Menubar>97  )98}