@svar-ui/vue-menu

SVAR Vue Menu Component

Website • Getting Started • Demos

SVAR Vue Menu is a flexible menu component for adding navigation and interaction menus to your Vue 3 applications. The component is easy-to-customize, TypeScript-ready, and complements SVAR Vue Core library. Both light and dark themes available.

SVAR Vue Menu can be used as:

• Action Menu: Provides a compact list of actions (e.g. edit, delete, share.) that appears when a user clicks on a UI element.
• Basic Menu: A simple, hierarchical menu that displays options for navigation or actions.
• Context Menu: A right-click (or long-press) menu offering context-specific options for a selected element.
• DropDown Menu: A dropdown attached to buttons or other clickable elements, expanding on click.
• Menu Bar: A horizontal top-level menu providing access to grouped commands, with support for dropdowns and sub-menus.

Along with the Menu component, you can use the following SVAR Vue components to build a unified app interface:

• Core - a collection of customizable Vue UI components and form controls;
• Toolbar - toolbar component with configurable, responsive layouts;
• Tasklist - basic to-do list component to add, edit, check or delete tasks;
• Comments - nice-looking comments section with bubbles or flow views;
• File uploader - simple file uploader component.

:hammer_and_wrench: How to Use

To start using the components from the Menu package, simply import the package and include the desired component in your Vue file:

<script setup>
import { Menu } from "@svar-ui/vue-menu";
import "@svar-ui/vue-menu/all.css";
</script>

<template>
  <Menu />
</template>

See the getting started guide to quickly set up and begin using SVAR Menu components in your Vue projects.

:speech_balloon: Need Help?

Post an Issue or use our community forum.