Liferay.Design / Lexicon
/
Get StartedResources
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

Asset Toolbar

Sign In
LIFERAY DXP

A multi-purpose toolbar that can be located in different types of asset visualizations.

Layout

The asset toolbar's layout is flexible and adapts to different viewport sizes, as shown in the examples below:

8 columns

Asset publisher asset

Asset publisher asset toolbar

Knowledge base article

Asset publisher asset toolbar

Blog entry

Asset publisher asset toolbar

Blog list item

Asset publisher asset toolbar

Comments

Asset publisher asset toolbar

Mobile displays less than 577px in width

The examples below show the asset toolbar's behavior on mobile viewports:

Asset publisher asset

Asset publisher asset toolbar

Knowledge base article

Asset publisher asset toolbar

Blog entry

Asset publisher asset toolbar

Blog list item

Asset publisher asset toolbar

Comments

Asset publisher asset toolbar

The asset toolbar can contain tools, links, or informative elements.

The toolbar is organized into two different groups of tools or informative elements. Most of the tools and content are grouped on the left, and the social tools are grouped on the right.

The “Share” button displays a dropdown menu containing a list of places/networks where the user can share. This list contains the social networks represented as icon buttons outside the list, as well as any additional social networks that are available.

Asset toolbar share button clicked with dropdown menu

Examples of use

The example below shows the asset toolbar for the blogs application on desktop in an 8-column container:

Asset toolbar in Blogs 8 columns case

The same component in a 4-column container narrows to adapt to the available space:

Asset toolbar in Blogs 4 columns case

On mobile displays, the component transforms its toolbar:

Asset toolbar in Blogs mobile

Something to improve? Report an issue!
Menu