Floating Menu
Automatically add a floating menu to your app.
Dependencies
- @iconify/svelte
Installation
#in your app directory
npm install svelte-demo-floating-menu @iconify/svelteHow to use
- Import the component and supply it with an options object containing, at a minimum, a menuName and make sure targeted links are given both {menuName} and {handle} as classes. eg: options = { github: {}}
- Each menu can be given any of the following properties: 'desktop' (boolean), 'handheld' (boolean), 'icon' (string), 'handle' (string).
- Default visibility is 'true' for both desktop and handheld devices.
- Default handle is 'menu-item'.
<script>
import { svelte-demo-floating-menu } from 'svelte-demo-floating-menu';
# supply an options object to the component containing as as minimum a 'menuName' with default properties
const options = { menuName: { }, otherMenuName: {}, ... };
# or overwrite default menu properties
const options = { menuName: { desktop: true/false, handheld: true/false, icon: "iconify string", handle: 'link class string'}};
...
</script>
<body>
<FloatingMenu options={options} />
...
# add {menuName} and {handle} as classes to targeted links, add title attribute if child content is a graphics element only (or is empty!)
<a class="{menuName} {handle}" href="linktosomewhere.url" title="link description">Link description</a>