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..."

  

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

  

• 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.

  

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

  

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

  

• 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.

  

• 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.

  

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

  

• Run the application to see the result.

  
  

Assign Icons to Groups and Items

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

  

  Download Icons

   

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

  

• 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.

  

  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.

  

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

  

• 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.

  

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

  

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

  

• Run the application to see the result.

  
  

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.

  

  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.

  

• Run the application to see the result.