Click here to Skip to main content
15,126,367 members
Articles / Desktop Programming / Windows Forms
Posted 21 Feb 2007


28 bookmarked

Create a Breadcrumb Menu in VB.NET WinForms

Rate me:
Please Sign up or sign in to vote.
3.00/5 (3 votes)
21 Feb 2007CPOL3 min read
Provide a dynamic menu for drilling through data, or using the new Vista style of breadcrumbing for menu control.

Screenshot - breadcrumb.gif


Dynamic menu creation is nothing out of the ordinary. Developers can limit menu options based on user authorization. They (we) can also add menu items if a situation demands it, such as a form field meeting a certain value.

Menus traditionally come in two flavors on Windows Forms: text and buttons. Text links are items such as File->Save As. Buttons are, well, buttons.

Web pages can use a third type of menu known as a breadcrumb menu. It's a great way to see where you are and how you got there. For example:

Home > Forums > .NET > VB.NET > General

I had a recent situation where a user wanted to drill-down (data mine) via listviews / datagrids to deeper content. They needed to know where they were - like the big map at the shopping mall that says "you are here". Breadcrumbs!

I knew that my breadcrumb menu would need three key pieces of functionality:

  1. Add a menu breadcrumb at each drill down.
  2. Give user the ability to back up in the data via the breadcrumb menu.
  3. Remove a menu option if the user did the above.


The first part of the breadcrumb solution was to build a user control. I would need three of these on the form so a user control would fit nicely - OK, and I could reuse it later.

  • Build Functionality: Each time a menu item is added, it would add a symbol and the menu item, such as > Menu1. The LinkLabel would be used for the menu items.
  • Remove Functionality: If a user clicks on any link other than the last link in the breadcrumb chain, all the subsequent breadcrumbs should be removed.
  • Click Functionality: When the user clicks a LinkLabel, the form that holds the user control should receive the click event and process the correct breadcrumb click.

Problem Areas

It's easy to add a control at runtime. The problem is knowing where to add the control. For this reason, the user control will contain a private variable that contains the current width of all controls. Using this method, each subsequent control will be added in the right location.

The symbol > in the breadcrumb menu will be a label. This label will be given an identifier for easy reference for removal. Same goes for the LinkLabels. Each will be marked with a Tag of the same number to identify the breadcrumb set. This is important for removing breadcrumb items.


Create a new Windows Application project. Add a user control. Name it ClsBreadCrumb. Size the user control to 480x16. The control will be tall enough to hold a LinkLabel and wide enough to be placed on a form. The control can be resized on the hosted form at a later time, if necessary.


User Control

Define the private variables:

'used to item group count
Private iItemCount As Integer
'used for proper label placement
Private iIncreasingLength As Integer

The Build Function. This function will be called each time a new menu item is added:

Public Function AddBreadCrumbLink(ByVal strNewLinkLabel As String)
    iItemCount = iItemCount + 1
    'add the > symbol
    Dim ctrlLK As New Label
    ctrlLK.Top = 0
    ctrlLK.Left = iIncreasingLength
    'create unique name
    ctrlLK.Name = "BC" & iItemCount
    ctrlLK.Text = ">"
    'the tag will be used to identify what 
    'symbol to delete and what was clicked
    ctrlLK.Tag = iItemCount 'strArrayList.Count - 1
    'important!  autosize the control so everything has a smooth look
    ctrlLK.AutoSize = True
    'now add the control to your form
    'increase the private var so you will know where to 
    'start your next control
    iIncreasingLength = iIncreasingLength + ctrlLK.Width
    'add the new linklabel
    Dim ctrlLL As New LinkLabel
    ctrlLL.Top = 0
    ctrlLL.Name = strNewLinkLabel
    ctrlLL.Left = iIncreasingLength
    ctrlLL.Text = strNewLinkLabel
    'the tag will be used to identify what 
    'linklabel to delete and what was clicked
    ctrlLL.Tag = iItemCount
    ctrlLL.AutoSize = True
    iIncreasingLength = iIncreasingLength + ctrlLL.Width
    'add a handler for the linklabel
    'same userd for all and we will use the control.tag property
    ' to see which was clicked
    AddHandler ctrlLL.Click, AddressOf myLinkLabel_Click

End Function

Private Sub myLinkLabel_Click(ByVal sender As Object,  _
    ByVal e As System.EventArgs)
    'event is raised to the form that holds this control
    RaiseEvent ItemClicked(Me, New ItemClickedEventArgs(
    'we are moving back in the menu so we need to adjust our menu.
End Sub

Time to remove those menu items:

Private Sub RemoveLaterMenuItems(ByVal strTagIdentifierForMenuDeletion As String)

    Dim intValFromMenu As Integer
    Dim iMax As Integer
    Dim iFor As Integer
    Dim iCount As Integer

    intValFromMenu = CInt(strTagIdentifierForMenuDeletion)

    Do Until ClearMenuItems(intValFromMenu) = True
        'each breadcrumb is made up of a label and a linklabel.
        'each is tagged with the same number
        'each time a set is deleted, we decrease the itemcount by 1
        iCount = iCount + 1
        If (iCount Mod 2 = 0) Then
            iItemCount = iItemCount - 1
        End If

End Sub

Private Function ClearMenuItems(ByVal intValFromMenu As Integer) _
    As Boolean
    Dim intValFromControl As Integer

    ClearMenuItems = False
    Dim ThisCtrl As Control
    For Each ThisCtrl In Me.Controls
        'identify labels and link labels for that 
        'tag set (1's, 2's, etc.)
        intValFromControl = CInt(ThisCtrl.Tag)
        If intValFromControl > intValFromMenu Then
            iIncreasingLength = iIncreasingLength - ThisCtrl.Width
            Exit Function
        End If
    ClearMenuItems = True
End Function

Dealing with the Raise Events:

Public Event ItemClicked(ByVal sender As Object, ByVal e As ItemClickedEventArgs)

Public Class ItemClickedEventArgs
    Inherits System.EventArgs
    Public ItemText As String
    Public Sub New(ByVal Text As String)
        Me.ItemText = Text
    End Sub
End Class

Open up the form and build the project. In the toolbar, select "My User Controls" and drag the control to your Form1 form.

Let's add a bit of color to the user control:

Private Sub Form1_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs)  Handles MyBase.Load
    ClsBreadCrumb1.BackColor = Color.PaleGoldenrod
End Sub

Add a Button labeled cmdAddMenuItem and paste the following code:

Private Sub cmdAddMenuItem_Click(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles cmdAddMenuItem.Click
    ClsBreadCrumb1.AddBreadCrumbLink("LinkLabel" & icount)
    icount = icount + 1
End Sub

The icount counter is only used to provide different menu item names.

Finally, we want to handle those click events so we know what LinkLabel the user clicked.

Private Sub ClsBreadCrumb1_ItemClicked(ByVal sender As Object, _
        ByVal e As clsBreadCrumb.ItemClickedEventArgs) _
        Handles ClsBreadCrumb1.ItemClicked
    MessageBox.Show(Me, "The item " & e.ItemText & " was clicked.")
End Sub


This is a very basic tutorial on creating a breadcrumb style menu. It could probably be modified for using control arrays in VB 2005. Microsoft Vista now uses the breadcrumb system in the Control Panel section, among others, so we might be using this style of menu in applications a year down the road.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
Longtime computer programmer and author of the Cruise Control Customer Support guide. I have provided customer support in a variety of fields from the retail industry to the information technology field.

If you want to master your customer support services so you spend less time on customer support and actually provide a higher quality of support, check out my
homepage blog for articles you can use.

Comments and Discussions

GeneralAutosize does not work as posted Pin
Brandon Culley27-Oct-09 5:55
MemberBrandon Culley27-Oct-09 5:55 
GeneralRe: Autosize does not work as posted Pin
Brandon Culley27-Oct-09 6:49
MemberBrandon Culley27-Oct-09 6:49 
GeneralRe: Autosize does not work as posted Pin
Yigit Aktan8-Jan-15 2:47
MemberYigit Aktan8-Jan-15 2:47 
QuestionC# version? Pin
JonoUNC8923-Feb-07 11:01
MemberJonoUNC8923-Feb-07 11:01 
AnswerRe: C# version? Pin
jimibt3-Aug-07 3:44
Memberjimibt3-Aug-07 3:44 
try the convertvbtocsharp page below on the code. It has minor caveats but can be worked around quite easily:[^]
AnswerRe: C# version? Pin
Brandon Culley26-Oct-09 10:17
MemberBrandon Culley26-Oct-09 10:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.