https://github.com/svar-widgets/menu

Svelte menu component. Build dropdown menus, context menus, or complex menu bars.
https://github.com/svar-widgets/menu

menu menu-bar menu-component menu-navigation svelte svelte-component svelte-ui-components sveltejs ui-component

Last synced: 10 days ago
JSON representation

Svelte menu component. Build dropdown menus, context menus, or complex menu bars.

• Host: GitHub
• URL: https://github.com/svar-widgets/menu
• Owner: svar-widgets
• License: mit
• Created: 2024-10-04T18:00:01.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-10-15T16:41:08.000Z (22 days ago)
• Last Synced: 2024-10-16T22:58:36.648Z (21 days ago)
• Topics: menu, menu-bar, menu-component, menu-navigation, svelte, svelte-component, svelte-ui-components, sveltejs, ui-component
• Language: Svelte
• Homepage:
• Size: 96.7 KB
• Stars: 13
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license.txt

Awesome Lists containing this project

README

        


	

# SVAR Svelte Menu


[![npm](https://img.shields.io/npm/v/wx-svelte-menu.svg)](https://www.npmjs.com/package/wx-svelte-menu)

[![License](https://img.shields.io/github/license/svar-widgets/menu)](https://github.com/svar-widgets/menu/blob/main/license.txt)

[![npm downloads](https://img.shields.io/npm/dm/wx-svelte-menu.svg)](https://www.npmjs.com/package/wx-svelte-menu)





[Documentation](https://docs.svar.dev/svelte/core/category/menu) • [Demos](https://docs.svar.dev/svelte/core/samples-menu/#/bar/willow)



SVAR Menu is a ready to use Svelte component for creating context and popup menus. Easily customize each menu item with text, icons, and sub-items, and control the menu's position relative to its parent element.

### How to Use

To use SVAR Svelte Menu, simply import the package and include the component in your Svelte file:

```svelte

	import { Menu } from "wx-svelte-menu";

	function onClick(item) {

		const action = ev.detail.action;

		message = action ? `clicked on ${action.id}` : "closed";

	}

	const options = [

		{ id: "edit-cut", text: "Cut", icon: "wxi wxi-content-cut" },

		{ id: "edit-copy", text: "Copy", icon: "wxi wxi-content-copy" },

		{

			id: "edit-paste",

			text: "Paste",

			icon: "wxi wxi-content-paste",

		},

	];

```

### How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work

2. Start the project in development mode with `yarn start`

### Run Tests

To run the test:

1. Start the test examples with:

    ```sh

    yarn start:tests

    ```

2. In a separate console, run the end-to-end tests with:

    ```sh

    yarn test:cypress

    ```