DevComponents Knowledge Base

SideNav control helps you create applications around so called “hamburger” style menu. You can also use SideNav control to add expandable tabs to your applications.

SideNav control consist of the tabs that are positioned vertically on left hand side with optional first button which collapses and expands the tab display. When tab display is collapsed the tabs only show image or symbol. When expanded both text and image or symbol are shown. So, its good idea to assign both image and text to each tab. Additionally due to the larger hit area for each tab they work well on touch enabled devices.

Each button on the left hand side is represented by SideNavItem objects. The first button which automatically collapses the menu is made by simply setting IsSystemMenu=true for that SideNavItem instance. That will enable automatic collapse/expand functionality for the menu when button is clicked. If you need to expand/collapse menu from code, simply use IsMenuExpanded property.

Each SideNavItem object may have an panel associated with it which is shown when button is clicked. The panel is an instance of SideNavPanel control and it is assigned to SideNavItem.Panel property.

If you do not assign panel to a SideNavItem the item will simply act as a button.

At design-time simply right-click the SideNav control to add new tabs, buttons or separators:

To create new tab at run-time simply use following code:

C#:

SideNavItem item = new SideNavItem();
item.Text = "Explore";
item.Symbol = "\uf002";
SideNavPanel panel = new SideNavPanel();
panel.Dock = DockStyle.Fill;
item.Panel = panel;
sideNav1.Controls.Add(panel);
sideNav1.Items.Add(item);
// Select item.
item.Checked = true;

VB:

Dim item As New SideNavItem()
item.Text = "Explore"
item.Symbol = ChrW(&Hf002).ToString()
Dim panel As New SideNavPanel()
panel.Dock = DockStyle.Fill
item.Panel = panel
sideNav1.Controls.Add(panel)
sideNav1.Items.Add(item)
' Select item.
item.Checked = True

SideNav control also allows end users to resize it by using the resizer which is positioned on the right-edge of the control. This functionality is controlled by EnableSplitter property.

SideNav control provides an option for end user to collapse the selected content using the button in content header. EnableClose property controls whether this button is visible or not. From code you use Close() method to close the control and Open() method to open it back up. Here is how closing looks like:

Control selected content can also be maximized by end user by using maximize button in tab header. Maximize will simply expand the width of the control so all available space on the parent control right hand side is consumed. EnableMaximize property controls whether this button is visible. From code you use Maximize() method to maximize the control and Maximize method to restore it. This is how this looks like:

Selection

To select items in SideNav control you can set sideNav.SelectedItem property to an instance of SideNavItem that you want to select. As an alternative you can set sideNavItem.Checked=true to select given SideNavItem. SelectedItemChanged event will be fired after selection has changed.

Customizing Colors

All colors used by SideNav control are defined in Office2007ColorTable. Following code shows how to customize SideNav control colors, place it in form constructor after InitializeComponent() method call:

C#:

Office2007ColorTable table = ((Office2007Renderer)GlobalManager.Renderer).ColorTable;
SideNavColorTable ct = table.SideNav;
ct.TitleBackColor = Color.Red;
ct.SideNavItem.MouseOver.BackColors = new Color[] { Color.Red, Color.Yellow };
ct.SideNavItem.MouseOver.BorderColors = new Color[0]; // No border
ct.SideNavItem.Selected.BackColors = new Color[] { Color.Green };
ct.BorderColors = new Color[] { Color.Gold }; // Control border color

VB:

Dim table As Office2007ColorTable = CType(GlobalManager.Renderer, Office2007Renderer).ColorTable
Dim ct As SideNavColorTable = table.SideNav
ct.TitleBackColor = Color.Red
ct.SideNavItem.MouseOver.BackColors = New Color() { Color.Red, Color.Yellow }
ct.SideNavItem.MouseOver.BorderColors = New Color(){} ' No border
ct.SideNavItem.Selected.BackColors = New Color() { Color.Green }
ct.BorderColors = New Color() { Color.Gold } ' Control border color