@anupamtest/routes-menu-svelte v1.0.14

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

🔘Events

🔘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 {

}