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.

wisej-extensions/Wisej.Web.Ext.NavigationBar at 3.5 · iceteagroup/wisej-extensionsGitHub

NavigationBar Source Code

Compact View

The NavigationBar can collapse to show only icons by toggling the CompactView property.

How to Use

The NavigationBar extension can be added to a Wisej.NET project using NuGet Package Manager.

Wisej-3-NavigationBar 3.5.34nuget

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 and UserName. User panel can be shown/hidden with ShowUser.

Changing CompactView collapses/expands the NavigationBar.

If you wan to change the SelectedItem using the keyboard make sure to set EnableKeyboardNavigation to true. Finetune the items with the ItemHeight property.

Items of the NavigationBar can be set up in the Designer or in code:

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.

Code Example: 3 Levels Deep

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.

Find more information in our NavigationBar example in C# or in VB.NET. Or in our blog.

Use our Navigation Application template to create a new application with a built in Navigation Bar: