> For the complete documentation index, see [llms.txt](https://docs.wisej.com/extensions/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wisej.com/extensions/extensions/ribbonbar.md).

# RibbonBar

The RibbonBar is a command bar that organizes the features of an application into a series of tabs at the top of the application main page or window.\
The RibbonBar user interface (UI) increases discoverability of features and functions, enables quicker learning of the application, and makes users feel more in control of their experience with the application. It replaces the traditional menu bar and toolbars.

![](/files/-MigRbsfm1M0TtFxv5kb)

{% embed url="<https://github.com/iceteagroup/wisej-extensions/tree/master/Wisej.Web.Ext.RibbonBar>" %}
RibbonBar Source Code
{% endembed %}

## Code Example

```csharp
RibbonBar ribbonBar1 = new RibbonBar();

RibbonBarPage ribbonBarPage1 = new RibbonBarPage();
ribbonBarPage1.Text = "ribbonBarPage1";
ribbonBar1.Pages.Add(ribbonBarPage1);

RibbonBarGroup ribbonBarGroup1 = new RibbonBarGroup();
ribbonBarPage1.Groups.Add(ribbonBarGroup1);

RibbonBarItemButton ribbonBarItemButton1 = new RibbonBarItemButton();
ribbonBarItemButton1.Text = "Button1";
RibbonBarItemCheckBox ribbonBarItemCheckBox1 = new RibbonBarItemCheckBox();
ribbonBarItemCheckBox1.Text = "CheckBox1";
RibbonBarItemTextBox ribbonBarItemTextBox1 = new RibbonBarItemTextBox();
ribbonBarItemTextBox1.Text = "TextBox1";
ribbonBarGroup1.Items.Add(ribbonBarItemButton1);
ribbonBarGroup1.Items.Add(ribbonBarItemCheckBox1);
ribbonBarGroup1.Items.Add(ribbonBarItemTextBox1);

this.Controls.Add(ribbonBar1);
```

This code snippet creates a ribbonbar (*ribbonBar1*) with a single page (*ribbonBarPage1*). The page contains a single group (*ribbonBarGroup1*). The group contains 3 items: a button (*ribbonBarItemButton1*), a checkbox (*ribbonBarItemCheckBox1*), and a textbox (*ribbonBarItemTextBox1*). The ribbonbar created by the code snippet looks like this:

<figure><img src="/files/KY0TMiEpEtzFqsNcm5Pz" alt=""><figcaption></figcaption></figure>

## How to Use

The RibbonBar is a composite control that is build from several layers. The TopLayer is an optional AppButton and a collection of Pages:

![](/files/-MihMfBB-luBr5ctg9vK)

Each Page can contain a collection of ButtonGroups or Groups or a combination of both.

![](/files/-MihMuwO88HjguLHKB7F)

A ButtonGroup can contain Buttons or SplitButtons.

![](/files/-MihN-5Xs0ltCXJUMsas)

A Group can contain a list of different items:

![](/files/-MihY9WjNzFySZ-033K_)

From left to right: Button, CheckBox, SplitButton, Separator, ComboBox, RadioButton and TextBox.

{% hint style="warning" %}
You can also use the generic type Control to add about any Control to a RibbonBar group!
{% endhint %}

Use the following properties to configure your RibbonBar:

* **CausesValidation**. Controls whether clicking RibbonBar items causes validation to be performed on the active control.
* **DefaultSize**. The default size of the control.
* **AppButton**. Represents the application button displayed before the first RibbonBarPage.
* **Tools**. The ToolsCollection associated with this control.
* **SelectedPage**. The currently active page.
* **SelectedPageIndex**., Index of the currently selected page.
* **Pages**. The collection of RibbonBarPages in the RibbonBar.
* **ImageList**. The collection of images available to the RibbonBar items.

A RibbonBar fires the following events:

* **AppButtonClick**. Fired when the [RibbonBarAppButton ](/extensions/extensions/ribbonbar.md)is clicked.
* **SelectedPageChanged**. Fired when the value of the SelectedPage property changes.
* **ItemClick**. Fired when the user clicks on a RibbonBar item.
* **MenuButtonItemClick**. Fired when the user clicks one of the drop down menu items of a [RibbonBarItemButton ](/extensions/extensions/ribbonbar.md)or [RibbonBarItemSplitButton](/extensions/extensions/ribbonbar.md).
* **GroupClick**. Fired when the user clicks on a [RibbonBarGroup ](/extensions/extensions/ribbonbar.md)button.
* **ItemValueChanged**. Fired when the user changes the value of a [RibbonBarItem](/extensions/extensions/ribbonbar.md).
* **ToolClick**. Fired when the user clicks on a tool.

{% hint style="warning" %}
When opening a RibbonBar in the Visual Studio Designer you can select any of its elements and change its properties directly in the Property Window.
{% endhint %}

{% hint style="info" %}
Find more information in our RibbonBar example in [C#](https://github.com/iceteagroup/wisej-examples/tree/2.2/RibbonBar) or in [VB.NET](https://github.com/iceteagroup/wisej-examples-vb/tree/main/RibbonBar).
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.wisej.com/extensions/extensions/ribbonbar.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.