Navbar
(part of package 'Bootstrap Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent
A component that represents a navigation bar with branding and menu items.
This is a reference page; many components have detailed usage guides here.
Properties
brandLogo
An optional media shown as branding logo in the upper left corner. Type: Media
brandLogoStyleClass
An optional media shown as branding logo in the upper left corner. Type: Styleclass
brandLogoTabindex
Tab order for the brandLogo in the tab navigation sequence. Type: String
brandText
An optional branding text shown in the upper left corner (after the optional brandLogo). Type: Tagstring Default Value: ""
brandTextTabindex
Tab order for the brandText in the tab navigation sequence. Type: String
collapseOnClick
Controls whether the navbar collapses when a menu item is clicked (typically for mobile views). Type: Boolean Default Value: true
collapsing
Indicates if the navbar should have a collapsing behavior. Type: Boolean Default Value: false
fixed
Controls whether the toolbar is fixed to either top or bottom of the screen. Type: String Default Value: null
inverse
Inverts the color scheme of the navbar for dark backgrounds. Type: Boolean
location
The position of the navbar component on the form. Type: Point
markClickedItemActive
When 'true', items of displayType MENU_ITEM will be shown as 'active' when clicked. Type: Boolean
menuItems
The array holding all menu items currently shown. Menu items can be specified either by menuItems or servoyMenu property. Type: Array<CustomType<bootstrapextracomponents-navbar.menuItem>>
servoyMenu
Menu property that defines the menu items to be shown (and all its properties). Can be used instead of menuItems property. Type: JSMenu
styleClass
The CSS class(es) to be added to navbar element. Type: Styleclass
visible
Controls whether the component is visible or hidden. Type: Visible
Events
onBrandClicked(event)
Called when the user clicks on the brand logo or text
Parameters:
{JSEvent} event The event object containing details about the click event e.g. target element, mouse coordinates
onMenuItemClicked(event,menuItem)
Called whenever a menu item is clicked or a submenu item is selected with the JSEvent and the menuItem object clicked on
Parameters:
{JSEvent} event The event object containing details about the click event e.g. target element, mouse coordinates
{CustomType<bootstrapextracomponents-navbar.menuItem>} menuItem The menu item object that was clicked
API
addMenuItem(menuItem,index)
Adds the given menu item to the Navbar
Example:
myElement.addMenuItem(myElement.createMenuItem('my menu'))Parameters:
{CustomType<bootstrapextracomponents-navbar.menuItem>} menuItem The menuItem to add
{Number} [index] Optional index where the item will be inserted
createMenuItem(text,itemId,position)
Creates a new menuItem
Example:
myElement.addMenuItem(myElement.createMenuItem('my menu'))Parameters:
Returns: CustomType<bootstrapextracomponents-navbar.menuItem> A newly created menu item object with the specified text, optional ID, and position alignment.
getLocation(itemId)
Retrieves the screen location of a specific navbar item. Returns the location as point (object with x and y properties).
Example:
var location = myElement.getLocation('itemID')Parameters:
{String} itemId The node to retrieve location for.
Returns: Point The location of the item.
getMenuItem(itemId)
Returns the menu item with the given ID or null if not found
Example:
var item = myElement.getMenuItem('itemID')Parameters:
{String} itemId The unique identifier of the menu item to retrieve.
Returns: CustomType<bootstrapextracomponents-navbar.menuItem> The menu item with the specified ID, or null if no such item exists.
getSelectedMenu()
Returns the currently selected menu item
Example:
var item = myElement.getSelectedMenu()Returns: CustomType<bootstrapextracomponents-navbar.menuItem> The currently selected menu item, or null if no item is selected.
getSize(itemId)
Retrieves the size of a specific navbar item. Returns the size as dimension (object with width and height properties).
Example:
var size = myElement.getSize('itemID')Parameters:
{String} itemId The node to retrieve size for.
Returns: Dimension The size of the item.
openSubMenu(itemId)
Opens the submenu of the specified menu item.
Example:
myElement.openSubMenu('itemId')Parameters:
{String} itemId The unique identifier of the menu item whose submenu should be opened.
removeMenuItem(itemId)
Removes the menu item with the given item ID
Example:
myElement.removeMenuItem('itemID')Parameters:
{String} itemId The unique identifier of the menu item to be removed from the Dropdown.
requestFocus(itemId)
Sets focus on the passed element on the navbar
Example:
myElement.requestFocus('itemId')Parameters:
{String} itemId The unique identifier of the menu item on the navbar to set focus on.
setMenuItemEnabled(itemId,enabled)
Enables or disables the menu with the given item ID
Example:
myElement.setMenuItemEnabled('itemID',false)Parameters:
setMenuItems(menuItems)
Sets the menu items of the Navbar
Example:
myElement.setMenuItems(menuItems)Parameters:
{Array<CustomType<bootstrapextracomponents-navbar.menuItem>>} menuItems An array of menu items to be set for the Navbar, replacing any existing menu configuration.
setMenuSelected(itemId)
Sets the menu item with the given item ID to selected
Example:
myElement.setMenuSelected('itemID')Parameters:
{String} itemId The unique identifier of the menu item to be set as selected.
setSubMenuItemEnabled(itemId,submenuItemId,enabled)
Enables or disables the submenu with the given item ID of the menu with the given item ID
Example:
myElement.setSubMenuItemEnabled('itemID','submenuID',false)Parameters:
Types
menuItem
Represents a menu item in the navbar. scripting type: CustomType<bootstrapextracomponents-navbar.menuItem>
attributes
Additional custom HTML attributes for the menu item.
Type: map
dataProvider
Dataprovider for a text field (only used for display types 'INPUT' and 'INPUT_GROUP')
Type: dataprovider
displayType
Controls the appearance of the menu item. One of 'MENU_ITEM', 'TEXT', 'BUTTON', 'INPUT' or 'INPUT_GROUP'.
Type: string
Default Value: "MENU_ITEM"
enabled
Determines whether the menu item is interactive or disabled.
Type: boolean
Default Value: true
iconName
An optional icon added to the menu item. Any glyphicon or font awesome icon can be used (e.g. 'fa fa-car'). When used with INPUT or INPUT_GROUP used as the button's icon.
Type: string
inputButtonStyleClass
Style class to control the optional button shown with INPUT or INPUT_GROUP. Typically one of bootstraps button classes ('btn-default', 'btn-primary', 'btn-success', 'btn-info', 'btn-warning', 'btn-danger', 'btn-link').
Type: styleclass
inputButtonText
Text of the optional button shown with INPUT or INPUT_GROUP.
Type: tagstring
isActive
When 'true', a MENU_ITEM item will be shown as 'active'.
Type: boolean
Default Value: false
itemId
Identifier of a menu item. This property is required to allow the component to figure out what item a user selected.
Type: string
onAction
Function that will be called if the item is clicked on (MENU_ITEM, BUTTON), a submenu is selected (MENU_ITEM with subMenuItems) or the user hits enter, leaves the field or clicks the optional button (INPUT, INPUT_GROUP). If not set, the component will call the onMenuItemClicked method assigned to the component itself.
Type: function
position
Controls whether an item is shown on the left or on the right of the navbar.
Type: string
Default Value: "LEFT"
styleClass
Additional style class(es) of the menu item.
Type: styleclass
subMenuItems
An optional array of sub menus for a MENU_ITEM type. When set, the item will be shown as a dropdown.
Type: subMenuItem[]
tabindex
Tab order for the menu item in the tab navigation sequence.
Type: string
text
The text shown. Is used as placeholder text on INPUT or INPUT_GROUP items.
Type: tagstring
tooltip
Tooltip text shown when hovering over the menu item.
Type: tagstring
userData
Custom data associated with the menu item for reference.
Type: object
valuelist
When set, an INPUT or INPUT_GROUP item will show a typeahead list.
Type: valuelist
subMenuItem
Represents a submenu item in the navbar. scripting type: CustomType<bootstrapextracomponents-navbar.subMenuItem>
enabled
Determines whether the submenu item is interactive or disabled.
Type: boolean
Default Value: true
iconName
An optional icon added to the submenu item. Any glyphicon or font awesome icon can be used (e.g. 'fa fa-car'). When used with INPUT or INPUT_GROUP used as the button's icon.
Type: string
isDivider
When this property is set to `true`, then the submenu item will be displayed as a visually divider line.
Type: boolean
itemId
Identifier of a submenu item. This property is required to allow the component to figure out what item a user selected.
Type: string
onAction
Function that will be called if the item is clicked.
Type: function
styleClass
Additional style class(es) of the menu item.
Type: styleclass
tabindex
Tab order for the submenu item in the tab navigation sequence.
Type: string
text
The text shown. Is used as placeholder text on INPUT or INPUT_GROUP items.
Type: tagstring
userData
Custom data associated with the submenu item for reference.
Type: object
Last updated
Was this helpful?