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:

• {String} text The item's text

• {String} [itemId] Optional ID to identify the item in scripting

• {String} [position] Alignment of the item in the navbar as either LEFT or RIGHT

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:

• {String} itemId The unique identifier of the menu item to enable or disable.

• {Boolean} enabled A flag indicating whether to enable (true) or disable (false) the specified menu item.

---

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:

• {String} itemId The unique identifier of the menu item containing the submenu.

• {String} submenuItemId The unique identifier of the submenu item to enable or disable.

• {Boolean} enabled A flag indicating whether to enable (true) or disable (false) the specified submenu item.

---

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

---