Get Started

DevExpress VCL NavBar Control

Free 30-Day Trial

Experience the DevExpress Difference™

Download Free Trial

The DevExpress VCL NavBar control is a Microsoft Office-inspired multi-purpose UI component. It allows you to incorporate a Side Bar, a Navigation Pane or a Windows-inspired Explorer Bar in your next Delphi and C++Builder app with absolute ease. Our NavBar is elegant, flexible and fully customizable.

In this short tutorial, we’ll show you how to add the DevExpress VCL NavBar control to a project and leverage its flexibility to deliver a customized user experience.

If you are new to the DevExpress VCL product line and want to see how the ExpressNavBar integrates with our complete line of 100% VCL UI components, feel free to download our 30-day free eval today. Should you have any questions about our VCL product line, write to us at info@devexpress.com.

Create a NavBar Layout

 

  • Create a new application.
  • Place the TdxNavBar control on a form and align the control to the form's left border. Double-click the control or right-click it and select "Structure Designer..."

    VCL NavBar Control - Getting Started | DevExpress

  • Click the "Add Group" button twice to create two groups.

    VCL NavBar Control - Getting Started | DevExpress

  • Click a group to select it. The Object Inspector displays the group's properties and events. Change the Caption property values to "Company Info" and "Sales Info". You can also change their automatically generated Name property values to identify each group.

    VCL NavBar Control - Getting Started | DevExpress

  • Click the "Add Item" button five times to create five new items.

    VCL NavBar Control - Getting Started | DevExpress

  • Change the Name property values to "Employees", "Products", "Orders", "Customers", and "Opportunities". The corresponding Caption property values update automatically.

    VCL NavBar Control - Getting Started | DevExpress

  • Drag the "Employees" and "Products" items to the "Company Info" group. Drag the "Orders", "Customers", and "Opportunities" items to the "Sales Info" group. Note that you can link a single item to multiple groups.

    VCL NavBar Control - Getting Started | DevExpress

  • Close the designer. Right-click the NavBar control and click the "Appearance Designer..." item in the pop-up menu. Select the HamburgerMenu style and close the designer.

    VCL NavBar Control - Getting Started | DevExpress

  • Set the NavBar control's OptionsView.HamburgerMenu.NavigationPaneMode property to npmFull.

    VCL NavBar Control - Getting Started | DevExpress

  • Run the application to see the result.


    VCL NavBar Control - Getting Started | DevExpress

Assign Icons to Groups and Items

 

  • Place a TImageList component on the form and add two 16x16 icons to the image list:

    VCL NavBar Control - Getting Started | DevExpress

    Download Icons

     

  • Assign the image list to the NavBar control's OptionsImage.SmallImages property.

    VCL NavBar Control - Getting Started | DevExpress

  • Place another TImageList component on the form and change its Width and Height property values to 32. Add five 32x32 icons to the image list and assign it to the NavBar control's OptionsImage.LargeImages property.

    VCL NavBar Control - Getting Started | DevExpress

    Download Icons

     

  • Click the green selector box in the "Products" item. The box turns red and shows the item's properties in the Object Inspector. Assign 0 to the SmallImageIndex property to use the first image. Assign 1 to the same property of the "Employees" item.

    VCL NavBar Control - Getting Started | DevExpress

  • Change the NavBar control's ActiveGroupIndex property to 1 to make the "Sales Info" group active and display its items.

    VCL NavBar Control - Getting Started | DevExpress

  • To assign 32x32 icons to items of the "Sales Info" group, set its LinksUseSmallImages property to False. Set the LargeImageIndex property of "Orders", "Customers", and "Opportunities" to 0, 1, and 2, respectively.

    VCL NavBar Control - Getting Started | DevExpress

  • Select the "Sales Info" group and set its LargeImageIndex property to 4.

    VCL NavBar Control - Getting Started | DevExpress

  • Select the "Company Info" group and set its UseSmallImages property to False. Set the group's LargeImageIndex property to 3.

    VCL NavBar Control - Getting Started | DevExpress

  • Run the application to see the result.


    VCL NavBar Control - Getting Started | DevExpress

Implement Module Navigation Functionality

 

  • Now you can add additional functionality to this application. Select the "Products" item and handle its OnClick event to implement an action in response to a click on this item.

    VCL NavBar Control - Getting Started | DevExpress

    For instance, you can display a panel with UI elements for this item and hide other panels.

    • Delphi
    • C++BUILDER
        var
        AVisiblePanel: TPanel;
        //...
        procedure MakeVisible(APanel: TPanel);
        begin
            if(AVisiblePanel <> APanel) then
            begin
                if(AVisiblePanel <> nil) then
                    AVisiblePanel.Visible := False;
                APanel.Visible := True;
                AVisiblePanel := APanel;
            end;
        end;
    
        procedure TForm3.ProductsClick(Sender: TObject);
        begin
            MakeVisible(pnlProducts);
        end;
    
        TPanel *AVisiblePanel = nullptr;
        //...
        void __fastcall MakeVisible(TPanel *APanel)
        {
            if(AVisiblePanel != APanel)
            {
                if(AVisiblePanel != nullptr)
                    AVisiblePanel->Visible = false;
                APanel->Visible = true;
                AVisiblePanel = APanel;
            }
        }
        
        void __fastcall TForm3::ProductsClick(TObject *Sender)
        {
            MakeVisible(pnlProducts);
        }
    
  • Handle the OnClick event for the other four items and call the MakeVisible procedure for their panels. Set the NavBar control's OptionsBehavior.Common.AllowSelectLinks property to True to highlight the selected item.

    VCL NavBar Control - Getting Started | DevExpress

  • Run the application to see the result.


    VCL NavBar Control - Getting Started | DevExpress

100% VCL. 100% DevExpress

If you are new to third-party controls, take a moment to review the broad range of products we offer for the VCL platform and see if our tools can deliver the functionality you require. We are here to help and ready to assist you in any way we can.

If you've used third-party controls in the past, and have been disappointed by quality, performance or reliability, we ask that you give our products a chance and see for yourself why we are different. Our support team is on call and ready to discuss your needs and focus on your requirements. We know how difficult it is to invest in tools again once you’ve been burned by others, so our commitment to you is simple. We’ll do everything we can to earn your confidence and your business. Tell us how we can help.

Together, we can do amazing things.

Free 30 Day Trial