# Navbar

(part of package '[Bootstrap Extra Components](/reference/servoyextensions/packages/ui-component-packages/bootstrap-extra-components.md)')\
Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\
Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md)

A component that represents a navigation bar with branding and menu items.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### brandLogo

An optional media shown as branding logo in the upper left corner. Type: [Media](/reference/servoy-developer/component_and_service_property_types.md#media)

***

### brandLogoStyleClass

An optional media shown as branding logo in the upper left corner. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

### brandLogoTabindex

Tab order for the brandLogo in the tab navigation sequence. Type: [String](/reference/servoycore/dev-api/js-lib/string.md)

***

### brandText

An optional branding text shown in the upper left corner (after the optional brandLogo). Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: ""

***

### brandTextTabindex

Tab order for the brandText in the tab navigation sequence. Type: [String](/reference/servoycore/dev-api/js-lib/string.md)

***

### collapseOnClick

Controls whether the navbar collapses when a menu item is clicked (typically for mobile views). Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

### collapsing

Indicates if the navbar should have a collapsing behavior. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false

***

### fixed

Controls whether the toolbar is fixed to either top or bottom of the screen. Type: [String](/reference/servoycore/dev-api/js-lib/string.md) Default Value: null

***

### inverse

Inverts the color scheme of the navbar for dark backgrounds. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)

***

### location

The position of the navbar component on the form. Type: [Point](https://github.com/Servoy/gitbook/blob/master/reference/servoycore/dev-api/js-lib/point.md)

***

### markClickedItemActive

When 'true', items of displayType MENU\_ITEM will be shown as 'active' when clicked. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)

***

### 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>>](#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](/reference/servoycore/dev-api/menus/jsmenu.md)

***

### styleClass

The CSS class(es) to be added to navbar element. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

### visible

Controls whether the component is visible or hidden. Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible)

***

## Events

### onBrandClicked(event)

Called when the user clicks on the brand logo or text

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} 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](/reference/servoycore/dev-api/application/jsevent.md)} event The event object containing details about the click event e.g. target element, mouse coordinates
> * {[CustomType\<bootstrapextracomponents-navbar.menuItem>](#menuitem)} menuItem The menu item object that was clicked

***

## API

### addMenuItem(menuItem,index)

Adds the given menu item to the Navbar

**Example:**

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

**Parameters:**

> * {[CustomType\<bootstrapextracomponents-navbar.menuItem>](#menuitem)} menuItem The menuItem to add
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} \[index] Optional index where the item will be inserted

***

### createMenuItem(text,itemId,position)

Creates a new menuItem

**Example:**

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

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} text The item's text
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} \[itemId] Optional ID to identify the item in scripting
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} \[position] Alignment of the item in the navbar as either LEFT or RIGHT

**Returns:** [CustomType\<bootstrapextracomponents-navbar.menuItem>](#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:**

```js
var location = myElement.getLocation('itemID')
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} itemId The node to retrieve location for.

**Returns:** [Point](https://github.com/Servoy/gitbook/blob/master/reference/servoycore/dev-api/js-lib/point.md) The location of the item.

***

### getMenuItem(itemId)

Returns the menu item with the given ID or null if not found

**Example:**

```js
var item = myElement.getMenuItem('itemID')
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} itemId The unique identifier of the menu item to retrieve.

**Returns:** [CustomType\<bootstrapextracomponents-navbar.menuItem>](#menuitem) The menu item with the specified ID, or null if no such item exists.

***

### getSelectedMenu()

Returns the currently selected menu item

**Example:**

```js
var item = myElement.getSelectedMenu()
```

**Returns:** [CustomType\<bootstrapextracomponents-navbar.menuItem>](#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:**

```js
var size = myElement.getSize('itemID')
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} itemId The node to retrieve size for.

**Returns:** [Dimension](https://github.com/Servoy/gitbook/blob/master/reference/servoycore/dev-api/js-lib/dimension.md) The size of the item.

***

### openSubMenu(itemId)

Opens the submenu of the specified menu item.

**Example:**

```js
myElement.openSubMenu('itemId')
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} 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:**

```js
myElement.removeMenuItem('itemID')
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} 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:**

```js
myElement.requestFocus('itemId')
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} 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:**

```js
myElement.setMenuItemEnabled('itemID',false)
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} itemId The unique identifier of the menu item to enable or disable.
> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} 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:**

```js
myElement.setMenuItems(menuItems)
```

**Parameters:**

> * {[Array\<CustomType\<bootstrapextracomponents-navbar.menuItem>>](#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:**

```js
myElement.setMenuSelected('itemID')
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} 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:**

```js
myElement.setSubMenuItemEnabled('itemID','submenuID',false)
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} itemId The unique identifier of the menu item containing the submenu.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} submenuItemId The unique identifier of the submenu item to enable or disable.
> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} 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](/reference/servoy-developer/component_and_service_property_types.md#map)
* dataProvider
  * Dataprovider for a text field (only used for display types 'INPUT' and 'INPUT\_GROUP')
  * **Type**: [dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)
* displayType
  * Controls the appearance of the menu item. One of 'MENU\_ITEM', 'TEXT', 'BUTTON', 'INPUT' or 'INPUT\_GROUP'.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "MENU\_ITEM"
* enabled
  * Determines whether the menu item is interactive or disabled.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **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](/reference/servoycore/dev-api/js-lib/string.md)
* 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](/reference/servoy-developer/component_and_service_property_types.md#styleclass)
* inputButtonText
  * Text of the optional button shown with INPUT or INPUT\_GROUP.
  * **Type**: [tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)
* isActive
  * When 'true', a MENU\_ITEM item will be shown as 'active'.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **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](/reference/servoycore/dev-api/js-lib/string.md)
* 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](/reference/servoy-developer/component_and_service_property_types.md#function)
* position
  * Controls whether an item is shown on the left or on the right of the navbar.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "LEFT"
* styleClass
  * Additional style class(es) of the menu item.
  * **Type**: [styleclass](/reference/servoy-developer/component_and_service_property_types.md#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\[\]](#submenuitem)
* tabindex
  * Tab order for the menu item in the tab navigation sequence.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* text
  * The text shown. Is used as placeholder text on INPUT or INPUT\_GROUP items.
  * **Type**: [tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)
* tooltip
  * Tooltip text shown when hovering over the menu item.
  * **Type**: [tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)
* userData
  * Custom data associated with the menu item for reference.
  * **Type**: [object](/reference/servoycore/dev-api/js-lib/object.md)
* valuelist
  * When set, an INPUT or INPUT\_GROUP item will show a typeahead list.
  * **Type**: [valuelist](/reference/servoy-developer/component_and_service_property_types.md#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](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **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](/reference/servoycore/dev-api/js-lib/string.md)
* isDivider
  * When this property is set to \`true\`, then the submenu item will be displayed as a visually divider line.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
* itemId
  * Identifier of a submenu item. This property is required to allow the component to figure out what item a user selected.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* onAction
  * Function that will be called if the item is clicked.
  * **Type**: [function](/reference/servoy-developer/component_and_service_property_types.md#function)
* styleClass
  * Additional style class(es) of the menu item.
  * **Type**: [styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)
* tabindex
  * Tab order for the submenu item in the tab navigation sequence.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* text
  * The text shown. Is used as placeholder text on INPUT or INPUT\_GROUP items.
  * **Type**: [tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)
* userData
  * Custom data associated with the submenu item for reference.
  * **Type**: [object](/reference/servoycore/dev-api/js-lib/object.md)

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/navigation/navbar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.