# NavigationBar A responsive vertical navigation bar that displays an application header with logo, child items, and a user panel with gravatar and other user information. Similar to the Bootstrap Sidebar, the NavigationBar enables you to quickly add a modern, responsive navigation bar to your application. It includes a top logo, an optional user information panel at the bottom, and nested items that can show a quick action icon and a text bubble to display additional information related to the item. ![](https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFp7MR1wemvcC5891_r%2F-MMhHiyCCg3oVSKm8BqZ%2F-MMhMVE3yDKWwSWgNK_t%2Fimage.png?alt=media\&token=aaa034c6-a0fa-4c33-947c-7bc678138aa7) {% embed url="" %} NavigationBar Source Code {% endembed %} ## Compact View The NavigationBar can collapse to show only icons by toggling the **CompactView** property. ![](https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFp7MR1wemvcC5891_r%2F-MMhMiFhLmVsvNp7Ft9Q%2F-MMhMmAQ90WeCY_FmKWi%2Fimage.png?alt=media\&token=6df78bfc-53ff-4146-8500-d8180c8353d9) ## How to Use The **NavigationBar** extension can be added to a Wisej.NET project using NuGet Package Manager. {% embed url="" %} The Navigation Bar is a composited control containing *Text* as the title, *Logo* to the left of it, a collection of *Items* and the User panel with [*UserStatus* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.navigationbar.navigationbar#userstatus)and [*UserName*](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.navigationbar.navigationbar#username).\ User panel can be shown/hidden with [*ShowUser*](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.navigationbar.navigationbar#showuser). Changing [*CompactView* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.navigationbar.navigationbar#compactview)collapses/expands the [NavigationBar](https://docs.wisej.com/extensions/extensions/navigationbar/api/wisej.web.ext.navigationbar.navigationbar). If you wan to change the [*SelectedItem* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.navigationbar.navigationbar#selecteditem)using the keyboard make sure to set [*EnableKeyboardNavigation* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.navigationbar.navigationbar#enablekeyboardnavigation)to true. Finetune the items with the [*ItemHeight* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.navigationbar.navigationbar#itemheight)property. [Items ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.navigationbar.navigationbar#items)of the [NavigationBar ](https://docs.wisej.com/extensions/extensions/navigationbar/api/wisej.web.ext.navigationbar.navigationbar)can be set up in the Designer or in code: ![](https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFp7MR1wemvcC5891_r%2F-MicWa6wcI_zWYuZs0b4%2F-MicYi12QIkff74dl_30%2Fimage.png?alt=media\&token=030c1d44-68fb-4770-9f08-4efb9880fb64) {% hint style="danger" %} Using the Designer is only recommended for the first 2 levels deep. Due to some flaws in the Visual Studio designer serialization you might want to add deeper levels by code. {% endhint %} ### Code Example: 3 Levels Deep ```csharp NavigationBar navigationBar1 = new NavigationBar(); NavigationBarItem navigationBarItem1 = new NavigationBarItem(); navigationBarItem1.Name = "navigationBarItem1"; navigationBarItem1.Text = "Item1"; navigationBar1.Items.AddRange(new NavigationBarItem[] { navigationBarItem1}); NavigationBarItem navigationBarSubItem = new NavigationBarItem(); navigationBarSubItem.Name = "navigationBarSubItem"; navigationBarSubItem.Text = "subitem"; navigationBarItem1.Items.AddRange(new NavigationBarItem[] { navigationBarSubItem}); NavigationBarItem navigationBarSubSubItem = new NavigationBarItem(); navigationBarSubSubItem.Name = "navigationBarSubSubItem"; navigationBarSubSubItem.Text = "subsubitem"; navigationBarSubItem.Items.AddRange(new NavigationBarItem[] { navigationBarSubSubItem}); this.Controls.Add(navigationBar1); ``` This code snippet adds 3 levels of items to the NavigationBar. The root item is `navigationBarItem1`. It is a parent to the item `navigationBarSubItem`. `navigationBarSubItem` is a parent to `navigationBarSubSubItem`. The resulting NavigationBar will look like this when fully expanded:
The extension also ships with a Theme mixin that controls various colors and animations that you can control by overriding in a custom mixin. {% hint style="info" %} Find more information in our NavigationBar example in [C#](https://github.com/iceteagroup/wisej-examples/tree/master/NavigationBar) or in [VB.NET](https://github.com/iceteagroup/wisej-examples-vb/tree/main/NavigationBar). Or in our [blog](https://wisej.com/blog/new_controls_navigationbar_and_more/). {% endhint %} {% hint style="info" %} Use our Navigation Application template to create a new application with a built in Navigation Bar:\ \ ![](https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MFp7MR1wemvcC5891_r%2Fuploads%2FHQiJLIg1Hsso0dLn00oO%2Fimage.png?alt=media\&token=29a47bbb-e02c-426e-a7d3-8d59909dc2f9) {% endhint %} --- # 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.wisej.com/extensions/extensions/navigationbar.md?ask= ``` 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.