Navbar
Last updated
Was this helpful?
Last updated
Was this helpful?
(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.
An optional media shown as branding logo in the upper left corner. Type:
An optional media shown as branding logo in the upper left corner. Type:
Tab order for the brandLogo in the tab navigation sequence. Type: String
An optional branding text shown in the upper left corner (after the optional brandLogo). Type: Default Value: ""
Tab order for the brandText in the tab navigation sequence. Type: String
Controls whether the navbar collapses when a menu item is clicked (typically for mobile views). Type: Boolean Default Value: true
Indicates if the navbar should have a collapsing behavior. Type: Boolean Default Value: false
Controls whether the toolbar is fixed to either top or bottom of the screen. Type: String Default Value: null
Inverts the color scheme of the navbar for dark backgrounds. Type: Boolean
The position of the navbar component on the form. Type: Point
When 'true', items of displayType MENU_ITEM will be shown as 'active' when clicked. Type: Boolean
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>>
Menu property that defines the menu items to be shown (and all its properties). Can be used instead of menuItems property. Type: JSMenu
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
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
Adds the given menu item to the Navbar
Example:
Parameters:
{CustomType<bootstrapextracomponents-navbar.menuItem>} menuItem The menuItem to add
{Number} [index] Optional index where the item will be inserted
Creates a new menuItem
Example:
Parameters:
Returns: CustomType<bootstrapextracomponents-navbar.menuItem> A newly created menu item object with the specified text, optional ID, and position alignment.
Retrieves the screen location of a specific navbar item. Returns the location as point (object with x and y properties).
Example:
Parameters:
{String} itemId The node to retrieve location for.
Returns: Point The location of the item.
Returns the menu item with the given ID or null if not found
Example:
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.
Returns the currently selected menu item
Example:
Returns: CustomType<bootstrapextracomponents-navbar.menuItem> The currently selected menu item, or null if no item is selected.
Retrieves the size of a specific navbar item. Returns the size as dimension (object with width and height properties).
Example:
Parameters:
{String} itemId The node to retrieve size for.
Returns: Dimension The size of the item.
Opens the submenu of the specified menu item.
Example:
Parameters:
{String} itemId The unique identifier of the menu item whose submenu should be opened.
Removes the menu item with the given item ID
Example:
Parameters:
{String} itemId The unique identifier of the menu item to be removed from the Dropdown.
Sets focus on the passed element on the navbar
Example:
Parameters:
{String} itemId The unique identifier of the menu item on the navbar to set focus on.
Enables or disables the menu with the given item ID
Example:
Parameters:
Sets the menu items of the Navbar
Example:
Parameters:
{Array<CustomType<bootstrapextracomponents-navbar.menuItem>>} menuItems An array of menu items to be set for the Navbar, replacing any existing menu configuration.
Sets the menu item with the given item ID to selected
Example:
Parameters:
{String} itemId The unique identifier of the menu item to be set as selected.
Enables or disables the submenu with the given item ID of the menu with the given item ID
Example:
Parameters:
Represents a menu item in the navbar. scripting type: CustomType<bootstrapextracomponents-navbar.menuItem>
attributes
Additional custom HTML attributes for the menu item.
dataProvider
Dataprovider for a text field (only used for display types 'INPUT' and 'INPUT_GROUP')
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').
inputButtonText
Text of the optional button shown with INPUT or INPUT_GROUP.
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.
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.
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.
tooltip
Tooltip text shown when hovering over the menu item.
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.
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.
styleClass
Additional style class(es) of the menu item.
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.
userData
Custom data associated with the submenu item for reference.
Type: object
The CSS class(es) to be added to navbar element. Type:
Controls whether the component is visible or hidden. Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type: