Searchfield introduction

To prepend a searchfield to the menu or to (some of) the panels, use the searchfield options and configuration.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                searchfield: {
                    // searchfield options
                }
            }, {
                searchfield: {
                    // searchfield configuration
                }
            });
        }
    );
</script>

Example

Give it a go, change the options below and see how it affects the menu.

  • Prepend a fixed searchfield to the menu.
  • Show all results in one panel.
  • Show sub-panels for a result.
  • Also search text-only listitems.
  • Add a clear-button.
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Options for the "searchfield" add-on

Option Datatype Default value Description
searchfield A map of options or true for searchfield.add.
{
add Boolean false Whether or not to automatically prepend a searchfield to the menu or (some of the) panels.
addTo String | HTMLElement[] "panels" Where to add the searchfield(s). Possible values: "panels" (prepends a searchfield to each panel), "panel" (prepends a searchfield to the search panel), a valid query selector (prepends a searchfield to each panel that maches the selector) and an array of HTML elements. To add a fixed searchfield to the menu, see the navbars add-on.
cancel Boolean false Whether or not to add a cancel button after the searchfield.
noResults String "No results found." The text to show when no results are found. If false no message will be shown.
placeholder String "Search" The placeholder text for the searchfield.
panel A map of options or true for panel.add. Only works when setting the addTo option to "panel" or adding a fixed searchfield to the menu with the navbars add-on.
{
add Boolean false Whether or not to add a search panel for showing the search results. If false, results will be shown in their actual panel.
dividers Boolean true Whether or not to add dividers to divide the results per panel.
fx String "none" The effect for opening and closing the search panel. Can be "none" (for no animation) or any effect in the effects extension. For example: "slide-right".
id String null The ID to add to the search panel.
splash String null HTML to show in the search panel before searching.
title String "Search" The title in the navbar for the search panel.
}
search Boolean true Whether or not to immediately search through the listitems while typing.
showSubPanels Boolean true Whether or not to show its sub-panels if a listitem matches the search.
showTextItems Boolean false Whether or not to show listitems without an anchor (an A element) in the results. If true, listitems with a SPAN elements will also be shown.
}

Configuration for the "searchfield" add-on

Option Datatype Default value Description
searchfield
{
clear Boolean false Whether or not to add a clear button to the searchfield.
form Object null Wraps the searchfield in a FORM element with the specified keys/values as attributes. If omitted or false, the searchfield will be wrapped in a DIV.
input Object null Adds the specified keys/values as attributes to the searchfield.
submit Boolean false Whether or not to add a submit button to the searchfield. Requires the searchfield.form configuration option to be set.
}

CSS variables for the "searchfield" add-on

The "searchfield" add-on has no CSS variables.

SCSS variables for the "searchfield" add-on

Variable Datatype Default value Description
Include CSS
$mm_include_searchfield Boolean true Whether or not to include CSS for the searchfield add-on throughout the entire CSS framework.
$mm_include_searchfield_btn Boolean $mm_include_searchfield Whether or not to include CSS for the clear and/or submit button(s) in the searchfield.
$mm_include_searchfield_searchpanel Boolean $mm_include_searchfield Whether or not to include CSS for the searchfield search panel.

API methods for the "searchfield" add-on

The "searchfield" add-on has no API methods.

Next add-on:
Section indexer