Navbar

(part of package 'Bootstrap Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

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

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: 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

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
{menuItem} menuItem

API

addMenuItem(menuItem,index)

Adds the given menu item to the Navbar

Example:

myElement.addMenuItem(myElement.createMenuItem('my menu'))

Parameters:

{menuItem} menuItem The menuItem to add
{int} [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: menuItem

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 ItemId the node to retrieve location for.

Returns: point 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

Returns: menuItem

getSelectedMenu()

Returns the currently selected menu item

Example:

var item = myElement.getSelectedMenu()

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 ItemId the node to retrieve size for.

Returns: dimension Size of the item.

openSubMenu(itemId)

Opens the submenu of the specified menu item.

Example:

myElement.openSubMenu('itemId')

Parameters:

{string} itemId MenuItemId

removeMenuItem(itemId)

Removes the menu item with the given item ID

Example:

myElement.removeMenuItem('itemID')

Parameters:

{string} itemId MenuItemId

requestFocus(itemId)

Sets focus on the passed element on the navbar

Example:

myElement.requestFocus('itemId')

Parameters:

{string} itemId MenuItemId

setMenuItemEnabled(itemId,enabled)

Enables or disables the menu with the given item ID

Example:

myElement.setMenuItemEnabled('itemID',false)

Parameters:

{string} itemId MenuItemId
{boolean} enabled Enabled

setMenuItems(menuItems)

Sets the menu items of the Navbar

Example:

myElement.setMenuItems(menuItems)

Parameters:

{menuItem[]} menuItems MenuItems

setMenuSelected(itemId)

Sets the menu item with the given item ID to selected

Example:

myElement.setMenuSelected('itemID')

Parameters:

{string} itemId MenuItemId

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 MenuItemId
{string} submenuItemId SubMenuItemId
{boolean} enabled Enabled

Types

menuItem

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

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

PreviousBreadcrumbs Nextsidenav

Last updated 20 hours ago