metaloha

Use a shortcode to define a drop-down form field, and shortcodes to define blocks of content that will be displayed when a specific entry is selected.
<h3>Usage</h3>
To add a content dropdown to a post, you can either select the Content Dropdown icon from the TinyMCE editor, or enter the shortcodes manually.
<pre><code>[dropdown name="controlName" class="customClassName"] - both `name` and `class` are optional; `name` will default to `dropdown-content`
</code></pre>
<ul>
<li>the <code>name</code> is used to identify which content sections are targetted by this dropdown; if there is only one dropdown on a page, it is optional; if there are multiple dropdowns on a page, each will need a unique name</li>
<li><code>class</code> can be a space-separated list of class names, or just a single class name</li>
<li>
only <code>[dropdown-option]</code> shortcodes may be inside this shortcode
[dropdown-option value=”someValue”] – the <code>value</code> field is technically optional, but is required if this option is meant to make a content block visible
</li>
<li>
must be inside a <code>[dropdown]</code> shortcode
[dropdown-content name=”controlName” value=”someValue”] – if the <code>name</code> matches a dropdown name, and the <code>value</code> matches the value of an option within that dropdown, then this content will be displayed when that specific option is selected.
</li>
<li>
again, <code>name</code> is technically optional, but must match a <code>[dropdown]</code> name (also defaults to <code>dropdown-content</code>)
</li>
<li><code>value</code> is required, and must match a <code>value</code> for a <code>[dropdown-option]</code></li>
<li>can be anywhere on the page</li>
</ul>
<h3>Example</h3>
Copy and paste the following content to see the plugin in action
[dropdown] 
[dropdown-option]Select one…[/dropdown-option] 
[dropdown-option value=”option1″]First option[/dropdown-option] 
[dropdown-option value=”option2″]Second Option[/dropdown-option] 
[/dropdown]
[dropdown-content value=”option1″]Content for the first option.[/dropdown-content]
[dropdown-content value=”option2″]Content for the second option.[/dropdown-content]
Those were all using the default values from the plugin. Let’s change it up a bit.
[dropdown] 
[dropdown-option value=”option1″]The First[/dropdown-option] 
[dropdown-option value=”option2″ default=true]The Second[/dropdown-option] 
[dropdown-option value=”option3″]The Third[/dropdown-option] 
[/dropdown]
You’ll notice below that the second option will be displayed by default for you.
[dropdown-content value=”option1″]Some different content for the second first option.[/dropdown-content]
[dropdown-content value=”option2″]Some different content for the second second option.[/dropdown-content]
[dropdown-content value=”option3″]Some different content for the second third option.[/dropdown-content]

Dropdown Content

Allows different content to be displayed based on the value of an author-defined drop-down box.

sevenspark

Saskia Teichmann

Key Benefits: 
✅ Better mobile navigation 
✅ No theme modifications needed 
✅ Works with any WordPress menu 
✅ Fully accessible 
✅ Customizable breakpoint
How it works: The plugin detects when someone visits your site on a mobile device and automatically converts your menu into an easy-to-use dropdown. Desktop visitors see your normal menu unchanged.
Perfect for: Anyone who wants to improve their mobile site navigation without technical hassle.
Mobile Menu Made Simple
Your WordPress menu automatically becomes a touch-friendly dropdown on mobile devices.
Key Benefits: 
✅ Better mobile navigation 
✅ No theme modifications needed 
✅ Works with any WordPress menu 
✅ Fully accessible 
✅ Customizable breakpoint
How it works: The plugin detects when someone visits your site on a mobile device and automatically converts your menu into an easy-to-use dropdown. Desktop visitors see your normal menu unchanged.
Perfect for: Anyone who wants to improve their mobile site navigation without technical hassle.
Technical note: This plugin uses WordPress’s native menu system and automatically detects screen size to show the appropriate menu format. It’s built with modern WordPress standards and includes full accessibility support.
<h4>Features</h4>
<ul>
<li>Modern Architecture: Built with PHP 8.0+ features and WordPress Coding Standards (WPCS)</li>
<li>Full Accessibility: WCAG 2.1 compliant with ARIA labels, keyboard navigation, and screen reader support</li>
<li>Responsive Design: Mobile-first approach with customizable breakpoints</li>
<li>Theme Compatibility: Works with all modern WordPress themes including block themes</li>
<li>Performance Optimized: Efficient asset loading and minimal overhead</li>
<li>Security Focused: Proper nonce verification, input sanitization, and capability checks</li>
<li>Translation Ready: Full internationalization support</li>
<li>Customizable: Extensive settings panel with real-time preview</li>
<li>Developer Friendly: Clean API, hooks, and filters for customization</li>
</ul>
<h4>What’s New in 2.0.0</h4>
<ul>
<li>Complete Rewrite: Modern object-oriented architecture with namespaces</li>
<li>WordPress 6.5+ Ready: Full compatibility with latest WordPress features</li>
<li>Accessibility First: WCAG 2.1 compliance with comprehensive ARIA support</li>
<li>Modern Admin Interface: Clean, responsive settings panel</li>
<li>Performance Improvements: Optimized asset loading and caching</li>
<li>Security Enhancements: Proper sanitization and validation</li>
<li>Developer API: Hooks and filters for customization</li>
<li>Block Theme Support: Works seamlessly with Full Site Editing</li>
</ul>

Responsive Mobile Select Menu

Your WordPress menu automatically becomes a touch-friendly dropdown on mobile devices.

Dropdown Content vs Responsive Mobile Select Menu