How to Insert Line Breaks in WordPress Menu Items

Line Breaks in WordPress Menu: If you have menu items with more than one word per item, one of the great ways to present the menu items would be to insert line breaks. That way, they are easier to read and keeps the menu bar uncluttered. I have decided to provide this guide as I couldn’t easily find one on the topic on google search.

Here’s an example of a menu with line breaks in the items.

Looking at the screenshot above, you would have noticed what I meant by line breaks in the menu items as opposed to the menu flowing to a second line due to lack of space (see screenshots below).

Actually, you would be avoiding the above scenario, in addition to the enhanced visual benefits, by inserting line breaks in the menu items.

Here’s how to do that:

1. Log in to WordPress dashboard.

2. Go to Appearance, Menu

3. Select an existing menu or create a new one

4. Expand the menu item on the right which you intend to insert a line break

5. In the ‘Label’ field, insert the following tag: <br /> between the two words you wish to break. In the first screenshot above, you would edit Wedding Cakes to Wedding<br /> Cakes.

6. Repeat for all items you wish to break in this manner.

7. Don’t forget to save your menu.

8. You may wish to add some styling to the menu using CSS – such as centering the content, specifying a font type, size and color. You can also choose to align the menu to the left or right.

Conclusion

Always remember: It is considered best practice and generally safer for you to add all modifications to your child theme’s style.css.

I reckon you could also use <br> instead of <br /> and get the same results, although I haven’t tried it. It does appear <br /> will be deprecated. Voila! If you encounter any challenges, just drop me a line below.