You create a drop panel by using the class
.droppanel. Drop panels can contain (among other elements): Drop panel headers (
.droppanel--header) and drop panel menus (
.droppanel--menu). The menu contains menu items (
<a>), with active ones marked as
By default, drop panels are hidden. You need to give them the class
.is-large) or ultra-wide (
<div class="droppanel is-active"> <div class="droppanel--header"> Search for... </div> <input class="form-element"> <div class="droppanel--header"> Order by... </div> <div class="droppanel--menu"> <a href="#">Score</a> <a href="#" class="is-active">Creation date</a> <a href="#">Last activity</a> <a href="#">Answer count</a> </div> </div>
Here is an example with different sizes
<div class="droppanel is-active is-large"> <p>Large size.</p> </div> <div class="droppanel is-active is-wide"> <p>Wide size.</p> </div>
Give the drop panel an id or unique class and add
data-drop="[query]" to the trigger, where the query is a CSS selector for the drop panel.
If you want to toggle a class on the trigger (for example
.is-active), you can add
data-drop-self-class-toggle="[class]" to the trigger. If you want to force a direction (up or down), to which the drop panel should go, add
data-drop-force-dir="[up|down]" to the trigger.
<button class="button is-filled" data-drop="#droppanel-example" data-drop-self-class-toggle="is-active">Toggle example drop panel</button> <div class="droppanel" id="droppanel-example"> <div class="droppanel--header">👋 Hello!</div> <p>Welcome to my drop panel!</p> </div>
Welcome to my drop panel!