Menubar

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from "@line/abc-def-react/menubar";

<script setup lang="ts">
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from "@line/abc-def-vue/menubar";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@line/abc-def-react/menubar";

export function Example() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent><MenubarItem>Export CSS</MenubarItem></MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

<script setup lang="ts">
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@line/abc-def-vue/menubar";
</script>

<template>
  <Menubar>
    <MenubarMenu>
      <MenubarTrigger>File</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>Export CSS</MenubarItem>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</template>

Component tokens

Composition exports

Usage notes

• Use for app commands, not primary site navigation.
• Group commands consistently.
• Related component tokens use the `menubar` token group in `@line/abc-def-styles/css`.