How to Build Modern Navigation with TAdvNavBar Delphi developers frequently face the challenge of updating legacy user interfaces to meet modern design standards. The standard TTreeView or basic panel menus can make a fresh application feel instantly dated. ComponentPack’s TAdvNavBar offers a highly customizable, modern solution for building side-navigation panels, outlook-style menus, and responsive dashboards.
This guide will walk you through setting up TAdvNavBar from scratch, configuring its visual styles, and dynamically handling user navigation. 1. Setting Up the Component Architecture
The TAdvNavBar component relies on a hierarchical structure of panels and items. To get started, drop a TAdvNavBar component onto your main form. Key Visual Properties
Set these foundational properties in the Object Inspector to align the component with modern UI trends:
Align: Set to alLeft to create a standard navigation sidebar.
Width: Set between 200 and 250 pixels for optimal readability.
NavigationStyle: Set to nsOutlook or nsModern to control the container behavior. Understanding Pages and Panels
TAdvNavBar organizes content using Panes. Think of a Pane as a container or category. Inside each Pane, you can either drop standard Delphi controls (like buttons, trees, or frames) or use built-in Items for a clean, text-and-icon layout. 2. Configuring Panels and Content
To add navigation sections, right-click the component on your form and select Panes Editor. Adding Categories
Click Add to create a new Pane (e.g., “Dashboard”, “Settings”, “Reports”).
Set the Caption property for each pane to define the header text.
Assign an image index using the ImageIndex property if you are using a TImageList. Populating the Navigation Controls You can design the inside of a Pane in two distinct ways:
The Control Method: Click on a specific Pane at design time. Drag and drop a TAdvOfficeHint or a custom TFrame directly onto it. This is ideal for complex nested menus.
The Item Method: Use the built-in Items collection property of the Pane to add clickable text links. This keeps the memory footprint light and ensures uniform spacing. 3. Applying Modern Styling and Themes
Out of the box, the component might inherit classic Windows themes. To make it look sleek and modern, you need to leverage the built-in styling engine. Using Style Templates
The easiest way to achieve a modern Look and Feel is through the Style property.
Change the Style property to psOffice2019White, psOffice2019Dark, or psWindows10.
This action automatically updates the gradients, hover states, and font colors across all sub-panels. Manual Customization For custom branding, expand the ControlLook property: Color: Set the primary background color.
ColorHot: Define the background color when a user hovers over a pane.
CaptionFont: Choose a clean, modern font variable like Segoe UI or Roboto, sizing it appropriately between 10pt and 11pt. 4. Writing the Navigation Logic
A beautiful navigation bar is useless without underlying logic. You need to handle user clicks to swap out the views in your application main body. Handling Pane Changes
The most common implementation uses a TPageControl or TNotebook on the right side of the screen. When a user clicks a different pane, your code should switch the active page.
Double-click the TAdvNavBar component to generate the OnPaneChanged event handler and add the following code:
procedure TMainForm.AdvNavBar1PaneChanged(Sender: TObject; PaneIndex: Integer); begin // Match the active page of your main view area to the clicked pane index MyPageControl.ActivePageIndex := PaneIndex; // Optional: Update the main header text dynamically HeaderLabel.Caption := AdvNavBar1.Panes[PaneIndex].Caption; end; Use code with caution. Tracking Individual Item Clicks
If you are using the internal Items collection inside a pane instead of separate panes, use the OnItemClick event:
procedure TMainForm.AdvNavBar1ItemClick(Sender: TObject; PaneIndex, ItemIndex: Integer); begin case PaneIndex of 0: // First Pane (e.g., Dashboard) if ItemIndex = 0 then OpenOverview() else if ItemIndex = 1 then OpenAnalytics(); 1: // Second Pane (e.g., Settings) if ItemIndex = 0 then OpenProfileSettings(); end; end; Use code with caution. Conclusion
By leveraging TAdvNavBar, you can bypass hours of manual canvas painting and panel alignment. It gives your Delphi applications a responsive, structured, and modern menu architecture that feels native to current operating systems. Combine it with high-DPI image lists and clean typography to provide your users with an exceptional UI experience.
To help refine this implementation for your project, let me know:
What version of Delphi and TMS Component Pack are you currently running?
Will your application need a collapsible sidebar mode for smaller screens? AI responses may include mistakes. Learn more
Leave a Reply