Menubar - Pharen

Use Menubar to build an action or navigation pattern. This page covers every Vue component exported by the public module.

View code

<script setup lang="ts">
import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger } from '@pharen/ui';
</script>

<template>
  <Menubar>
    <MenubarMenu>
      <MenubarTrigger>File</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>New workflow<MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
        <MenubarItem>Duplicate<MenubarShortcut>⇧⌘D</MenubarShortcut></MenubarItem>
        <MenubarSeparator />
        <MenubarItem>Archive</MenubarItem>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu><MenubarTrigger>Edit</MenubarTrigger><MenubarContent><MenubarItem>Undo</MenubarItem><MenubarItem>Redo</MenubarItem></MenubarContent></MenubarMenu>
  </Menubar>
</template>

Installation

npm install @pharen/ui

pnpm add @pharen/ui

yarn add @pharen/ui

bun add @pharen/ui

Import @pharen/ui/styles.css exactly once in your application entrypoint.

Usage

import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from '@pharen/ui';

Exports

Export	Purpose
`Menubar`	Exported Vue component from this module.
`MenubarCheckboxItem`	Represents one item.
`MenubarContent`	Contains the visible content.
`MenubarGroup`	Groups related items.
`MenubarItem`	Represents one item.
`MenubarLabel`	Labels a value or region.
`MenubarMenu`	Exported Vue component from this module.
`MenubarPortal`	Exported Vue component from this module.
`MenubarRadioGroup`	Groups related items.
`MenubarRadioItem`	Represents one item.
`MenubarSeparator`	Separates adjacent regions.
`MenubarShortcut`	Exported Vue component from this module.
`MenubarSub`	Exported Vue component from this module.
`MenubarSubContent`	Contains the visible content.
`MenubarSubTrigger`	Opens or activates the component.
`MenubarTrigger`	Opens or activates the component.

Source

Open the source on GitHub