Menubar

npm install @volta/menubar

import {
  Rwe158,
  Rwe159,
  Rwe160,
  Rwe175,
  Rwe70,
  Rwe73,
} from '@volta/iconography';
import {
  Menubar,
  MenubarAfterIcon,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarIconItem,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from '@volta/menubar';

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Icons</MenubarTrigger>
    <MenubarContent>
      <MenubarIconItem icon={<Rwe158></Rwe158>}>
        Menu Item <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarIconItem>
      <MenubarIconItem icon={<Rwe159></Rwe159>}>
        Menu Item <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarIconItem>
      <MenubarIconItem icon={<Rwe160></Rwe160>}>
        Menu Item <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarIconItem>
      <MenubarIconItem icon={<Rwe175></Rwe175>}>
        Menu Item <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarIconItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>More icons</MenubarTrigger>
    <MenubarContent>
      <MenubarIconItem icon={<Rwe158></Rwe158>}>
        Menu Item <MenubarAfterIcon icon={<Rwe158></Rwe158>} />
      </MenubarIconItem>
      <MenubarIconItem icon={<Rwe159></Rwe159>}>
        Menu Item <MenubarAfterIcon icon={<Rwe158></Rwe158>} />
      </MenubarIconItem>
      <MenubarSeparator />
      <MenubarIconItem icon={<Rwe160></Rwe160>}>
        Menu Item <MenubarAfterIcon icon={<Rwe70></Rwe70>} />
      </MenubarIconItem>
      <MenubarIconItem icon={<Rwe175></Rwe175>}>
        Menu Item <MenubarAfterIcon icon={<Rwe73></Rwe73>} />
      </MenubarIconItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        New Window <MenubarShortcut>⌘N</MenubarShortcut>
      </MenubarItem>
      <MenubarItem disabled>New Incognito Window</MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger>Share</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>Email link</MenubarItem>
          <MenubarItem>Messages</MenubarItem>
          <MenubarItem>Notes</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <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 />
      <MenubarSub>
        <MenubarSubTrigger>Find</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>Search the web</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Find...</MenubarItem>
          <MenubarItem>Find Next</MenubarItem>
          <MenubarItem>Find Previous</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>Cut</MenubarItem>
      <MenubarItem>Copy</MenubarItem>
      <MenubarItem>Paste</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
      <MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
      <MenubarSeparator />
      <MenubarItem inset>
        Reload <MenubarShortcut>⌘R</MenubarShortcut>
      </MenubarItem>
      <MenubarItem disabled inset>
        Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem inset>Toggle Fullscreen</MenubarItem>
      <MenubarSeparator />
      <MenubarItem inset>Hide Sidebar</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Profiles</MenubarTrigger>
    <MenubarContent>
      <MenubarRadioGroup value="benoit">
        <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
        <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
        <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
      </MenubarRadioGroup>
      <MenubarSeparator />
      <MenubarItem inset>Edit...</MenubarItem>
      <MenubarSeparator />
      <MenubarItem inset>Add Profile...</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>