Navbar drop-down menu

[kiwioverseas]

What's the best way to implement a hover over drop-down list using siimple? Something similar to the last example on this page: https://picocss.com/docs/dropdowns.html

Also I found this page is missing: https://siimple.xyz/recipes/navbar/

[jmjuanes]

Hello!

To be honest the dropdown is one feature that I wanted to add but I did not find a solution that I liked. Maybe now is the time to find one solution for the next release.

My first idea was to create a new element called dropdown to act as a wrapper for placing navigation links, dividers... And for displaying the dropdown when the user moves the mouse over the parent element, create a special with-dropdown modifier for the parent element.

Something like that:

// siimple.config.js
import base from "@siimple/preset-base";

export default {
    ...base,
    styles: {
        ".with-dropdown": {
            position: "relative",
        },
        ".dropdown": {
            display: "none",
            backgroundColor: "muted",
            borderRadius: "0.5rem", // or "md"
            position: "absolute",
            top: "100%",
            left: "0px",
            padding: "1rem",
            ".with-dropdown:hover &": {
                display: "block",
            },
        },
    },
};

And in the HTML:

<div class="with-dropdown">
    <button class="button has-mb-1">Dropdown</button>
    <div class="dropdown">
        <a class="navlink">Action</a>
        <a class="navlink">Another action</a>
        <a class="navlink">Something else</a>
    </div>
</div>

You can try this code in the playground app: https://siimple.xyz/playground

I think that the key is the with-dropdown modifier. Tell me what you think.

And thanks for the missing page notice. The navbar recipe has been moved to https://siimple.xyz/docs/recipes/navbar. I will add a redirection from /recipes/* to /docs/recipes/*.

Edit

Updated the example for using the siimple configuration for generating dropdown class.

[kiwioverseas]

Thanks @jmjuanes I tried it in the playground and think your suggestion is a good solution! Hope to see it in the next release.

[jmjuanes]

FYI @kiwioverseas siimple 4.2.x has the new dropdown element: https://siimple.xyz/docs/elements/dropdown 😃

[kiwioverseas]

Awesome, thanks @jmjuanes !