Navigation Bar Extension

This sample application demonstrates how to use the , Navbar Delete and Navbar Add Link extensions to rebrand the HCL Verse Navbar.

Add the Navbar Delete Extension

[
{
"name": "Navbar Extension Sample",
"description": "Rebrand the HCL Verse Navbar",
"title": "Navbar Rebranding",
"extensions": [
{
"name": "Delete the default Org link",
"type": "com.ibm.action.delete",
"path": ".org",
"description": "Delete the default organization link"
}
],
"services": [
"Verse"
]
}
]

Extension Properties

PropertyTypeDefinition
namestringthe name of the extension
typestringthe extension point (List of Extension Points)
pathstringthe path must be a valid CSS selector within the Verse UI
descriptionstringdescription of the extension

Add the Navbar Add Link Extensions

[
{
"name": "Navbar Extension Sample",
"description": "Rebrand the HCL Verse Navbar",
"title": "Navbar Rebranding",
"extensions": [
{
"name": "Delete the default Org link",
"type": "com.ibm.action.delete",
"path": ".org",
"description": "Delete the default organization link"
},
{
"id": "new-company-logo",
"name": "New Company logo",
"type": "com.ibm.action.link",
"title": "New Company Logo",
"path": "com.ibm.navbar.order.1000",
"description": "This sample shows how to add a new organization logo",
"payload": {
"link": "https://www.hcltechsw.com/",
"icon": "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0nY2hhdC1pbWFnZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyBmaWxsPSd3aGl0ZScgdmlld0JveD0nMCAwIDIwIDIwJz48cGF0aCBjbGFzcz0nY2hhdC1pbWFnZS1vdXRsaW5lJyBkPSdNMTAgMEM1LjYgMCAyIDMuNiAyIDhjMCA0LjEgMy4xIDcuNCA3IDcuOVYyMGw2LjgtNi41QzE3LjEgMTIuMSAxOCAxMC4xIDE4IDhjMC00LjQtMy42LTgtOC04em01IDEyLjlsLTUgNC43VjE1Yy0zLjkgMC03LTMuMS03LTdzMy4xLTcgNy03IDcgMy4xIDcgN2MwIDEuOS0uOCAzLjYtMiA0Ljl6Jy8+PC9zdmc+",
"window_features": "target=_blank"
}
},
{
"id": "new-company-name",
"name": "New Company Name",
"type": "com.ibm.action.link",
"path": "com.ibm.navbar.order.1500",
"title": "New Company Name",
"description": "This sample shows how to add a new organization link",
"payload": {
"link": "https://www.hcltechsw.com/"
}
}
],
"services": [
"Verse"
]
}
]

Extension Properties

PropertyTypeDefinition
idstringa unique id that will be used as the class attribute (Ex. class="navext-{id}")
namestringthe name of the extension
typestringthe extension point (List of Extension Points)
pathstringthe location of the link on the navbar in the format: com.ibm.navbar.order.orderNumber
descriptionstringdescription of the extension
titlestringthe name used for the new link (if no icon is provided)
linkstringAbsolute link to new website
iconstringAn icon to use when rendering the link (instead of the title text) (The only format supported for this property is a base64-encoded data-uri)
window_featuresstringAdditional (optional) attributes to cause link to open in new window

Test it Out

How it Works

A combination of the Navbar Extensions are used to rebrand the default HCL Verse navbar. The Delete Navbar Components extension is used first to remove the default organization logo. The logo is targeted via a CSS class selector, .org. Additionally, two New Link extension points are added to further customize the navbar. The first link adds a new company logo to the start of the navbar by targeting a CSS order property of 1000. Based on the current HCL Verse Navbar Orders table, this places the new link as the first element on the left of the navbar. The second extension adds a new link with the title New Company Name. This link is added at order 1500 which, in this case, will be displayed right after the new logo.

For more information on the default ordering of the HCL Verse navbar please reference the Navbar Extension documentation.