A flexible tool for web developers to create a menu for small screen devices using existing elements within the page. All written in vanilla JS and has no dependencies.

The plugin itself does not apply any styling to the menu, you can style it however you want. I've just included some premade styling options via CSS that you can use or extend from.

For more information, visit the Github page.

1. Add the plugin's JavaScript file

<script defer src="https://cdn.jsdelivr.net/gh/madebygrant/kin-menu@[version]/dist/js/kin-menu.min.js"></script>

2. Add the plugin's stylesheet (optional)

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/madebygrant/kin-menu@[version]/dist/css/kin-menu.all.css">

3. Setup and run the plugin in your website

<script>
    // An example setup of the plugin

    const kinOptions = {
        groups: [
            {
                element: 'ul',
                class: 'side-menu',
                clones: [
                    // Target the list items in a <nav> element with a class of 'top-menu'.
                    'nav.top-menu > ul > li'
                ]
            },
        ]
    };

    const kin = new KinMenu(kinOptions);
    kin.setStyle('side'); // Optional
    kin.init();
</script>