Svelte SvelteKit Component to render Menu Navigation from a .json object

A SvelteKit component to render a Menu Navigation from a json object.

It uses the package @anupamtest/routes-menu to generates the menu object based on the Folder based Routing and render the navigation using that.

🟣Installation

npm i -D @anupamtest/routes-menu @anupamtest/routes-menu-svelte

🧩 Basic Markup

// +layout.server.ts
import { getMenu, type TMenuOptions } from '@anupamtest/routes-menu'

export const load = (async () => {
    return {
        menu: getMenu()
    };
})

// +layout.svelte
<script lang="ts">
	export let data: LayoutData

	const menuClicked = (e: CustomEvent<TMenuItem>) => {
        // e.detail contains the data for the Menu Item clicked
		console.log(e.detail)
	}
</script>

<div id="sidebar">
    <Menu menu={data.menu} openLevels={1} on:menuClicked={(menuItem) => menuClicked(menuItem)} />
</div>

🔘Props

| Prop | Description | | ---- | ----------- | | menu | The menu json object. Structure as returned by the @simbeto/routes2menu package. | openLevels| How many levels should be expanded by default, in the menu hierarchy .

🔘Events

| Event | Description | | ----- | ----------- | | menuClicked() | Dispatched on any menu item click. The clicked menu item's data is passed to it. Checkout the example above.

🔘Styling

Some basic styling is set to visualize the navigation tree hierarchy. Rest can be styled as per the styling system you are using.

Below classes can be used to style various menu elements and their states:

Hierarchy goes like this:

nav.nav-list

li.nav-item

a.route      /* Menu Label */
li.nav-list     /* Sub Menu */

Menu Items

#sidebar .nav-item a.route {
    text-transform: capitalize;
}

Active Menu Item

#sidebar .nav-item a.active {
    font-weight: bold;
}

Toggle button icon

#sidebar .nav-item .toggle-btn::after {
    content: '🔼';
}
#sidebar .nav-item.closed .toggle-btn::after {
    content: '🔽';
}

Sub Menu

/* .nav-item .nav-list{} OR  */
#sidebar .sub-menu{
    padding-left: 5px;
}
#sidebar .sub-menu.closed {

}