https://github.com/emnudge/svelte-toolbar
toolbars in svelte
https://github.com/emnudge/svelte-toolbar
Last synced: about 2 months ago
JSON representation
toolbars in svelte
- Host: GitHub
- URL: https://github.com/emnudge/svelte-toolbar
- Owner: EmNudge
- Created: 2020-05-27T04:28:14.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-07-26T22:52:14.000Z (almost 4 years ago)
- Last Synced: 2026-02-18T04:35:12.598Z (4 months ago)
- Language: HTML
- Size: 16.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Svelte Toolbar
This was created when looking for a proper way to display a user-navigable menu.
This emulates the toolbar menu you would find on products like VS-Code.
Unfortunately, the CSS is not easily changeable. If you have ideas for how to remedy this, you can leave them in an issue. For now, you can simply copy/paste the code and just change the CSS.
## Usage
```html
import Toolbar from 'svelte-toolbar';
// snip...
const menu = [
{ name: 'File', children: [
{ name: 'Save As...', action: saveItem },
{ name: 'Close', action: closeFile },
]},
{ name: 'Edit', children: [
{ name: 'Do Thing', action: doThing },
{ name: 'Do Other Thing', action: doOtherThing }
]}
// etc...
]
```
**Note**: Any menu item can have an action or children. Probably both, but it shouldn't.
## How does this differ from a CSS Dropdown Menu?
1. A menu is generated from a nested object rather than annoying hand-crafted HTML
2. Top-level menus are only expanded when one of the top-level items are clicked.
3. Top-level menus will stay open until the user clicks outside of the toolbar.