Applying the Add Button Pattern

Lexicon’s add button pattern is for actions that add entities (for example a new blog entry button): it gives you a clean, minimal UI. You can use it in any of your app’s screens. The add button pattern consists of an add-menu tag and at least one add-menu-item tag.

Figure 1: The add button pattern consists of an `add-menu` tag and at least one `add-menu-item` tag.

If there’s only one item, the plus icon acts as a button that triggers the item. If there’s more than one item, clicking the plus icon displays a menu containing them.

Add a <liferay-frontend:add-menu-item> tag for every menu item you have. Here’s an example of the add button pattern with a single item:

<liferay-frontend:add-menu>
    <liferay-frontend:add-menu-item title='<%= LanguageUtil.get(request,
    "titleName") %>' url="<%= nameURL.toString() %>" />
</liferay-frontend:add-menu>

You can also find the add button pattern in Liferay DXP’s built-in apps. For example, the Message Boards Admin application uses the following add button pattern:

<liferay-frontend:add-menu>
    ...
    <liferay-frontend:add-menu-item title='<%= LanguageUtil.get(request,
    "thread") %>' url="<%= addMessageURL.toString() %>" />
    ...
    <liferay-frontend:add-menu-item title='<%= LanguageUtil.get(request,
    (categoryId == MBCategoryConstants.DEFAULT_PARENT_CATEGORY_ID) ?
    "category[message-board]" : "subcategory[message-board]") %>'
    url="<%= addCategoryURL.toString() %>" />
    ...
</liferay-frontend:add-menu>

There you have it! Now you know how to use the add button pattern.

Related Topics

Setting Search Container Animations

Adding the Management Bar