Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 4 months 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 (5 months ago)
- Default Branch: main
- Last Pushed: 2024-10-15T16:41:08.000Z (4 months ago)
- Last Synced: 2024-10-16T22:58:36.648Z (4 months 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[](https://www.npmjs.com/package/wx-svelte-menu)
[](https://github.com/svar-widgets/menu/blob/main/license.txt)
[](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
```