---
title: "How-To: Customize the Header Bar"
description: "See how to specify the layout of the header bar, and how to customize header-bar items, tabs, and buttons in Kendo UI"
ha_category:
- Templates
- UI Framework
ha_release: 0.1.0
ha_iot_class: Cloud
ha_config_flow: true
ha_codeowners:
- "@haazime"
- "@mauricederegt"
---
# How to: Customize the Header Bar
This article explains how to specify the layout of the header bar, and how to customize header-bar items, tabs, and buttons in Kendo UI.
## Specify the header bar layout
Use the `` [helper](/api/javascript/widgets/HeaderBar) in your Kendo UI script to add a header bar to the page, which includes a title bar and additional tabs. In the `.aspx` file, configure the header bar with the [`Header` property]({% slug howto_headerbar_aspx %}#configuring-the-header-property). In the code below, an image is displayed in the header bar. The header bar displays image controls on left and right sides, and the title and tabs are displayed on the top. To remove the title and tabs, use the [`Header.Title`]({% slug howto_headerbar_aspx#title-property %}#how-to-remove-the-header-title) and [`Header.Tabs`]({% slug howto_headerbar_aspx#tabs-property %}#how-to-remove-the-header-tabs) properties.
```cshtml
Header bar
Tabs
Tabs are supported when the "showTabs" option is true.
```
```javascript
// Create the Grid
var grid = $("#grid").data("kendoGrid");
// Add the custom actions in the toolbar
grid.toolbar = kendo.template($("#toolBarTemplate").html());
// Add the toolbar to the page
var headerBar = $("#example").find(".k-header-bar").kendoHeaderBar({
showTabs: true,
tabs: [{
text: "Foo",
encoded: false,
active: true
}, {
text: "Bar",
encoded: false,
active: false
}]
});
$("#example").prepend(headerBar.element);
```
[> screenshots forHow to: Specify the layout of the header bar<](how-to_customize_header_bar.png)
### Read more about adding custom actions in the header bar
The [header-bar]({% slug howto_customize_headerbar_ajax %}) component provides a custom tooltip that appears when hovering the icon. To add additional actions, in the [`header`](/api/javascript/header) property of the [`ScriptRegistrar`](/api/javascript/function) function, return a Kendo UI [Toolbar](/api/javascript/ui/toolbar) script.
## Customize the header bar layout
You can customize header-bar items, tabs, and buttons in the [`HeaderBar`](/api/javascript/ui/HeaderBar) component. The [events](#events) of the `HeaderBar` component let you execute code when a header bar item is clicked.
### Customize the header-bar items
You can add your own items to the header bar by using the [`Items`](/api/javascript/ui/HeaderBar/items) property. In this example, the header bar displays a tooltip when the tooltip icon is clicked. To specify the properties of each item, use the [items configuration options](/api/javascript/ui/HeaderBar/configuration#items). To configure a button, add the [image](/api/javascript/ui/Button#image), [tooltip](/api/javascript/ui/Button#tooltip), and [role](/api/javascript/ui/Button#role) properties to the button element, and add the [`HeaderBar`](/api/javascript/ui/HeaderBar) component to the button element.
```html
```
```javascript
// Set the configuration options for the items.
var itemsConfig = {
items: [{
text: "Bar",
encoded: false,
role: "foo",
image: "https://demos.telerik.com/kendo-ui/content/shared/icons/table-chart.png"
}, {
text: "Gadget",
encoded: false,
role: "bar",
action: {
tooltip: "Hello, Tooltip",
showTooltip: function(e) {
// Execute code when the button is clicked.
var headerBar = $("#kCustomIconTooltipButton").data("kendoTooltip");
headerBar.show();
}
},
action: function (e) {
// Execute code when the button is clicked.
},
image: "https://demos.telerik.com/kendo-ui/content/shared/icons/table-chart.png"
}]
};
var gridToolbar = $("#customIconTooltipButton").kendoToolBar(itemsConfig);
```
### Render a tab when the link is clicked
In the above example, the button toggles the display of a tab with a title **Hello, Tooltip**. This button is added to the toolbar
