Show more / Show less text

Knowledgebase Docs » Bellows
USEFUL? 4

The show more / show less feature allows you to hide items by default beyond a certain item in a submenu.

There are several steps to setting this up, so let’s walk through the process with an example.

Let’s say we have menu item, Europe, with a submenu that contains 9 countries.

However, we’ve decided that showing all 9 at once is more than we want. Instead, we’d like to only show the first 4, with an option to reveal the last 5.

1. Add a custom link item

The first thing we’ll do is add a custom link item to our menu to act as our “show more” toggle.

The Link Text for this item will be the toggle text. We’ve set it to “Show more” here, but you can set it to whatever you like.

We add the “Show more” item to the submenu, just before the first item which should be hidden. Since we want everything after “France” to be hidden by default, we add the “Show more” item after “France”

2. Set up the Show more item’s settings

Now click on the “Bellows” button while hovering over the “Show more” item to open the menu item settings. There are two settings, in the General tab, which will be relevant here.

First, check the “Show More” setting to turn this item into a show more toggle.

Bellows will automatically add a complementary “show less” toggle at the end of the submenu when the items are expanded. If you would like to change the text of this, you can do so in the “Show Less Text” setting.

3. Add an icon, customize the link

This step is optional, but differentiating the Show more link can be useful visually. I like to set an angle-down icon on the Show more item to assist visually.

You could also choose to use the “Customize Style” panel to customize the “Show more” item, for example, changing the font color or font weight.

4. Save your settings

Save your menu item settings by clicking the “Save Menu Item” button.

If you haven’t already, save your entire menu as well via the “Save Menu” button, to make sure the Show more item has been added and saved.

5. Results

The result is a submenu with a Show more toggle that can be use to toggle the remaining items: