Menu

Examples of styling the <ul> -> <li> elements produced by the Menu block with Tailwind classes.

Usage – copy the code for the desired appearance, paste it into your block editor, swap out the Menu block’s placeholder menu with one from your own WordPress nav menus. You can then edit the Tailwind classes to tailor the appearance further to meet your needs. If you’d like to re-use the appearance in multiple places and keep any changes in sync create a Preset.

Simple menu

Menu with children

Menu with dropdowns

Accordion menu

Basic menu

Basic menu with children

Left line menu