ASP.NET NavBar – How to Create and Populate Groups

The ASPxNavBar allows you to introduce cutting edge site navigation capabilities to your ASP.NET solutions with ease and simplicity. Whether you wish to emulate a Windows Explorer Style Bar of an MS Outlook SideBar® within your application, the ASP.NET NavBar is packed with countless developer friendly features specifically designed to help you build your best – without limit.

In this video, you will learn how to create, populate and customize group items within an ASP.NET NavBar Control.

So let’s get started…

  1. I’ll start with a new ASP.NET Application.
  2. From the Toolbox, I drag and drop a new ASPxNavBar Control onto the page.
  3. From the Smart Tag, I click on the link to invoke the Groups Editor.
  4. I click on the button to create a new Group.
  5. Let’s call this “Wikipedia” and specify an appropriate URL for it.
  6. I also expand the HeaderImage node and set its Url property to an existing image file.
  7. Next, I invoke the Item Editor so that I can add or remove items from the “Wikipedia” group.
  8. I create a new item and call it “Wikinews”.
  9. I will follow the same steps to specify a Url and an image for it.
  10. I create a second item, called “Wikiversity”.
  11. Again, setting a Url and image for it.
  12. I click OK to close the Item Editor.
  13. Back in the Groups Editor window, I create a second group and call it “Search”.
  14. I assign an image and invoke the Item Editor.
  15. For this group, I’ll be adding two items.
  16. One called “Yahoo” and one called “Google”.
  17. They will both have the NavigateUrl property set to their respective addresses.
  18. However, to demonstrate what a disabled item looks like in the NavBar control, I will set the Enabled property of the second item to False.
  19. And I’m done with the groups and items creation so I click “OK” twice to close the editors.
  20. You can see the groups and items have been successfully created.
  21. You can see that the items as well as the images are all clickable.
  22. I open the smart tag and invoke the Groups Editor.
  23. For the first group, I set the ItemImagePosition property to Top.
  24. This will position the item images above the links.
  25. I resize the NavBar Control and you can see that while the first group’s items are center-aligned, the second group is still aligned to the left.
  26. To change this, I need to expand the ItemStyle node and set the HorizontalAlign property.
  27. I can set the alignment to Right but for the purposes of this demo, I’ll make everything center-aligned.
  28. The ItemLinkMode property specifies how items are represented as links within the navbar control.
  29. This means that if an item has a URL assigned to it, then you have the option of making the whole content clickable, the text with the image or just the text by itself.
  30. However for now, I will leave it as is.
  31. I run the application to see what the NavBar Control looks like.
  32. You can see the clickable items as well as the disabled or “grayed out” item.
  33. The groups can also be collapsed and expanded.
  34. You’ll notice that the entire content are for each item as well as each group header is clickable.
  35. I click on one and I’m redirected to the specified URL.
  36. Now let’s see how we can further customize the behavior of the NavBar Control.
  37. I close the web browser and return to Visual Studio.
  38. The expand and collapse button of each group can be easily customized.
  39. For example, I can hide all expand buttons by setting the ShowExpandButtons property to False.
  40. The button’s position can be changed to the left of the group’s header by setting the ExpandButtonPosition property of the control.
  41. Let’s set it back to display on the right.
  42. You can further customize these buttons by providing your own images.
  43. To do this, you’ll have to set the CollapseImage property for the collapse button…
  44. …and the ExpandImage property for the expand button.
  45. Next, to give the navbar a more dynamic feel, I set its AutoCollapse property to True.
  46. You’ll see that now only one group can be expanded at a time.
  47. Lastly, let’s go back and take a look at the ItemLinkMode property again.
  48. As my final customization, I don’t want the whole content area to be clickable.
  49. Therefore, I will set the property to TextOnly so that only the item’s text is clickable at runtime.
  50. I run the application to see the final results.
  51. I expand the groups a few times and you can see that only one of them can remain expanded and visible at the same time.
  52. Additionally, you can see that the content area as well as the images are no longer clickable.
  53. I click on the link and I’m redirected to the specified URL.

For more information, please refer to the ASPxNavBar Documentation (

Thanks for watching and as always, thank you for choosing DevExpress.