Tile UI Vue
Source code

Components

Menubar

Horizontal menu bar.

Use Menubar for a desktop-style application menu.

import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from '@tile-ui/vue';
 
export default function MenubarDemo() {
	return (
		<Menubar>
			<MenubarMenu value="file">

Registry install

pnpm dlx shadcn@latest add @tile-ui/menubar

Package usage

import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from '@tile-ui/vue';
 
<Menubar>
	<MenubarMenu value="file">
		<MenubarTrigger>File</MenubarTrigger>
		<MenubarContent>
			<MenubarItem>New</MenubarItem>
			<MenubarItem>Open</MenubarItem>
		</MenubarContent>
	</MenubarMenu>
</Menubar>

Highlights

  • Multiple menus
  • Trigger and content
  • Checkbox and radio items

Registry dependencies

Item Purpose
menubar Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Prop Type Default
value string —
defaultValue string —
onValueChange (value: string | undefined) => void —
Prop Type Default
value string —
Prop Type Default
disabled boolean —
Prop Type Default
side 'top' | 'right' | 'bottom' | 'left' —
align 'start' | 'center' | 'end' —
sideOffset number —
alignOffset number —
Prop Type Default
inset boolean —
variant 'default' | 'destructive' —
disabled boolean —
onSelect (event: Event) => void —
Prop Type Default
checked boolean —
defaultChecked boolean —
onCheckedChange (checked: boolean) => void —
disabled boolean —
Prop Type Default
value string —
defaultValue string —
onValueChange (value: string) => void —
Prop Type Default
value string —
disabled boolean —
Prop Type Default
inset boolean —
Prop Type Default
open boolean —
defaultOpen boolean —
onOpenChange (open: boolean) => void —
Prop Type Default
inset boolean —
disabled boolean —
PreviousMarkerNextMessage