smallapis

Menu Styles

Five responsive menu styles with a live preview. Your theme’s menu is never touched.

Try it in your browser Download the zip
  • Version 1.3.0
  • WordPress 6.1+
  • PHP 7.4+
  • Tested up to 7.1
  • GPLv2 or later
The Styled menu block in the editor.

Try it here

Five styles.

Most menu plugins override the theme’s own navigation and then spend the rest of their life losing a CSS fight against it. This one renders into its own container, with its own scoped rules, wherever you place the block or the shortcode.

  • Vertical, accordion, live preview: free
  • Never fights your theme
  • Keyboard and screen-reader friendly
Live demo: Dropdown
Five styles, five colour sets, live preview: all freeYour theme’s menu is never replaced

What it does

Everything you need. Nothing that slows you down.

The list of styled menus with their shortcodes.
The list of styled menus with their shortcodes.

Free and with a key

Free, for good. A key when you need more.

Free, no account

Every feature, with a limit on quantity only.

  • 5 styled menus
  • All five styles, the live preview and the colour sets
  • The Styled menu block and the shortcode
  • Mobile breakpoint, hover or click dropdowns
Download free

With a key

$29 a year or $99 once, for the four plugins on one site.

  • As many styled menus as you need
  • The same key unlocks the three other plugins on the site
Get a key

Download

menu-styles.zipMenu Styles 1.3.0 · 32 kB · GPLv2

One zip, no account, no key: upload it in Plugins → Add New Plugin → Upload Plugin and it works at once.

Download the zipTry it first

Install

  1. Build your menu the usual way, in Appearance → Menus.
  2. Go to Appearance → Menu Styles, add a styled menu, pick a style, watch the preview.
  3. Add the Styled menu block to a page, a template or a block header, or paste the shortcode.

Installation guide Activate a key

Questions

About Menu Styles.

Something not working?

The documentation covers caches, nginx, WP-CLI and the problems people actually run into.

TroubleshootingAll docs
Will it change my theme's header menu?

No, and it cannot. It adds a menu where you place it and loads nothing on pages that do not use one.

Can I put it in my header?

Yes with a block theme: add the Styled menu block to the header template part. With a classic theme, use a widget area or a hook with the shortcode.

Do I have to rebuild my menu?

No. It uses the menus in Appearance → Menus, with their items, classes and current-page states.

My theme now shows two menus.

That is expected: Menu Styles adds a menu where you place it and never replaces the theme's. If the styled one is meant to replace the header menu, remove the theme's menu from its location in Appearance, Menus (or from the header template in a block theme), and keep only the block.

How do I hide an item on phones?

In Appearance, Menus, open Screen Options and tick CSS Classes. Then give the item the class msty-hide-mobile, or msty-hide-desktop for the opposite.

Can an update break my style?

Your settings are stored as plain values (colours, sizes, a style name), not as generated CSS, and the rules all live under the plugin's own .msty class. New options arrive with defaults that reproduce the previous look.

Does it work with a page builder?

Anywhere a shortcode works.

How much does it cost?

It is free, for good, with no account. A key at $29 a year or $99 once lifts the limits of the four plugins on one site. See pricing.

Changelog

What’s new.

1.3.0

  • New: five ready-made colour sets, applied in one click and visible at once in the preview.
  • New: a separate colour for the current page.
  • New: dropdowns can open on a click of their arrow only, instead of on hover.
  • New: choose the width below which the menu switches to its phone layout.
  • New: msty-hide-mobile and msty-hide-desktop classes to keep an item for one kind of screen.
  • New: the empty list explains the three steps to a first styled menu.
  • Changed: clearer directory description and answers on double menus, hiding items and updates.

1.2.0

  • New: a Get a key button in the plugin header. After paying, one click activates the key on the site it was bought from, no copy and paste.
  • New: once the plugin has done its job, a short request for a review, on its own screens only, which can be put off or turned off.

1.1.1

  • Changed: the Smallapis service moved to its own domain, smallapis.com.
Earlier versions

1.1.0

  • New: the Styled menu block now appears in the block inserter, with a menu picker and a preview.
  • New: live preview while editing, for new menus too.
  • New: alignment, duplicate, and a copy button for the shortcode.
  • New: the stylesheet loads in the page head when the page uses the shortcode, so nothing flashes.
  • Fixed: menu item titles containing HTML were shown as code.
  • Fixed: the current page was not announced to screen readers.
  • Fixed: classes and attributes added to menu items by other plugins were dropped.
  • Fixed: a key check could slow down a visitor's page; it now happens in the background.
  • Fixed: the burger button now says which list it opens.

1.0.0

  • First release.

The same key unlocks.

WebP & AVIF OffloadLighter images in WebP and AVIF, including the AVIF your host cannot make. Simple PopupsPopups that load nothing on pages without one. Exit intent and scheduling included, free. Private SpaceMembers-only pages on real WordPress accounts, created from a spreadsheet.