App Components
Menu Item (New)
MenuItem.svelte is a component that renders a menu item.
Renders a menu item for a menu.
This component is used in the SidebarNav.svelte
of the (app)
.
All props are optional, but have default values if none given.
Will add the .active
class to the a
element if the current path matches the href
prop.
If the activeOnSubPaths
prop is set to true
, the .active
class will also be added if the current path is a subpath of the href
prop.
See app.css
on how to add a custom style the .active
class (only for menu items).
Basic Usage
To use the component:
+layout.svelte
<script lang="ts">
import MenuCategory from '$lib/ui/app/MenuCategory.svelte';
import MenuItem from '$lib/ui/app/MenuCategory.svelte';
import { Home, Bot } from 'lucide-svelte';
</script>
<ul class="menu">
<MenuCategory label="A label" icon={Home}>
<MenuItem href="link" label="Label" icon={Bot} activeOnSubPaths={true} />
</MenuCategory>
</ul>