Give your application a modern navigation menu in minutes. One control is a sidebar or an accordion, folds into an icon rail with a smooth animation, shows badges for unread counts and works fully from the keyboard. Light and dark themes come built in, and the tabbed form puts the document tabs in a themed title bar, like a web browser. One model and one headless renderer drive the bar on FireMonkey, WinForms, WPF, Avalonia, the VCL of Delphi 7 to 13 and C++ Builder, so every front end of your product navigates the same way.
Twenty features that turn a list of pages into a navigation shell your users find their way around at once.
One control covers the two navigation styles business applications use, and the narrow rail between them.
Layout and modes
Most business applications need the same thing on the left edge of the main form: a list of pages, grouped by area, with the current page clearly marked. Drop a TsgcVCLNavigationBar on the form, align it to the left and add the items. Group headers title the rows below them in a muted colour and are never selected. The selected row gets an accent tinted background and a 3 pixel accent bar, so users always see where they are. Hover and pressed states, hints and disabled rows are all drawn for you, so the bar feels finished on the first run.
Mode := nbmSidebar is the default styleIsGroup turns an item into a group headerItemHeight and GroupHeight set the row heightsScrollIntoView shows any item
Layout and modes
Settings screens and admin consoles often have more sections than fit on screen. Set Mode to nbmAccordion and every group header becomes a section that opens and closes the items below it, with a chevron on the right and indented children. By default only one group is open at a time, which keeps a long menu short. Set AllowMultiExpand when users need several sections open together. The items, the events and your code stay exactly the same. Items placed before the first header belong to no group and are always shown, which suits a Home or Dashboard entry above the sections.
Mode := nbmAccordion switches the whole barExpanded opens or closes a group from codeAllowMultiExpand lets several groups stay openIndent sets the indentation of the child itemsLayout and modes
Wide sidebars steal space from the data your users came to see. Set Collapsed and the bar folds from its expanded width to a narrow icon rail in about 150 ms. In the rail only the icons are drawn, the caption becomes the hint, group headers turn into separator lines and badges become dots, so nothing important is lost. The bar sets its own width, so the content beside it simply follows with alClient. Bind the Collapsed property to a hamburger button, a user setting or the width of the form, and the rail opens and closes the same way in sidebar and in accordion mode.
Collapsed switches between the two widthsExpandedWidth (220) and CollapsedWidth (56) in logical pixelsAnimateCollapse turns the animation on or offOnCollapsedChange tells you when the rail opens or closesLayout and modes
A navigation bar is only useful when it switches what the user sees. Click or tap an enabled item and the bar selects it, fires OnItemClick and then runs the OnClick of the item. OnSelectionChange is the single place to show the matching page, for example the tab of a TPageControl with hidden tabs, which is exactly how the SidebarApp demo is built. SelectedIndex reads and sets the current page from code. Disable an item the user cannot reach yet, explain why in its hint, or hide it for roles that should not see it, and the selection logic keeps working.
SelectedIndex is the page the user choseOnSelectionChange switches the page or frameOnItemClick on the bar and OnClick per itemEnabled, Hint and Visible per itemA multi-level tree with search, document tabs, a breadcrumb and a command palette, all on the same framework neutral model as the bar.
Navigation shell
Large applications outgrow a flat list of pages. Set Mode to nbmTree and the bar becomes a tree with as many levels as you need: the items stay one flat collection and the Depth of an item sets its level, so the code that fills the bar barely changes. Every level is indented and every parent can be collapsed. Turn on ShowSearch and a search row above the items filters the tree as the user types, keeping the parents of every match open and highlighting the matched characters. Fuzzy matching finds 'Settings' from 'stg'. Tree mode and search are part of every edition.
Mode := nbmTree and Depth per itemExpandAll, CollapseAll and Expand(aIndex, aRecursive)Filter with FilterMode nfmContains or nfmFuzzyShowSearch draws the search row, Esc clears it* expands a whole branchNavigation shell
Document style applications show their open pages as tabs. TsgcFMXNavigationTabs, TsgcVCLNavigationTabs and the WinForms, WPF and Avalonia strips draw tabs with an icon, a caption, a close button and a modified dot, plus a new tab button and a list of every tab. When the tabs do not fit, TabSizing shrinks them or scroll buttons appear. The Control of a tab is the page the strip shows while the tab is active. In the Registered edition the user also drags tabs to a new place, pins the ones that must stay, and drags a tab out of the strip to open it in its own window, and SaveLayout keeps the arrangement for the next run.
Tabs.AddTab, ActiveIndex and Control per tabTabSizing, CloseButtons, ShowNewButton, ShowListButtonOnTabClose can refusePinned tabs, OnTabTearOff, SaveLayout and LoadLayoutNavigation shell
Deep trees need a way to see where you are and to jump back up. The breadcrumb shows the path as a row of segments, for example Mail, Folders, Work. A click on a segment goes back to it, and the chevron after a segment lists its children to go somewhere else. Link it to a navigation bar and it follows the selected item, or fill it on its own from a Path or from the Segments. When the path is too long, the leading segments fold into an overflow button. In the Registered edition a click on the empty area, F4 or Ctrl+L turns the breadcrumb into an edit with the full path, like the address bar of a file manager.
NavigationBar links the breadcrumb to a barPath, PathDelimiter and OnGetChildren on its ownOnSegmentClick and AutoTruncateOnPathEditNavigation shell Registered only
Power users would rather type than hunt through menus. Press Ctrl+Shift+P and the command palette opens at the top of the window: type a few letters and it ranks every command by a fuzzy match, so 'tgsb' finds 'Toggle sidebar', with the matched characters highlighted, the category or path in a muted colour and the shortcut on the right. With an empty query the recently used commands come first. The palette lists its own commands and every command source you add: the items of a navigation bar, the buttons of a ribbon or a toolbar (Delphi), the actions of an action list, or a source of your own.
Commands.AddCommand with a category, keywords and shortcut textSources.AddSource for a bar, a ribbon, a toolbar or an action listSaveRecent and LoadRecent keep the recently used listICommand on the commands in .NETRegistered edition on FireMonkey, VCL, WinForms, WPF and Avalonia. The IsgcUICommandSource interface is part of every edition.
Read the help topic Command sourcesNavigation shell
Browsers, terminals and modern editors put their tabs in the window caption, so the documents get the full height of the screen. The tabbed form does the same for your application. Drop it on a form and link it to the tab strip: sgcUI removes the native caption and draws a themed title bar with the window icon, the tabs, the new tab button and the minimize, maximize and close buttons, in the sgcUI theme of the application, Classic or Fluent, light or dark. The window keeps its shadow, its resize borders and its maximized behaviour, and Windows 11 shows the snap layouts when the pointer rests on the maximize button. The empty space right of the last tab drags the window. In the Registered edition the user drags a tab out of the strip into a new window and drops it on the title bar of another window, like a web browser.
TsgcVCLNavigationTabbedForm and TsgcFMXNavigationTabbedForm in Delphi and C++ Builder, TsgcWinFormsNavigationTabbedForm, TsgcWpfNavigationTabbedWindow and TsgcAvaloniaNavigationTabbedWindow in .NETTabs links the tab strip. In Delphi, Notebook moves the strip of a notebook into the title bar while the pages stay in the notebookTabs on the window sets it up from XAMLTearOffMode moves a torn off tab to the window under the pointer, and ttmNewForm opens it in a new window from OnCreateTearOffForm that follows the pointerThe tabbed form is in every edition, Community included. Tear-off is in the Registered edition, like the tear-off of the tabs. The themed frame needs Windows with desktop composition, and on FireMonkey it is applied on Windows only: on macOS, Linux, iOS and Android the native title bar stays.
Read the help topic Window frame .NET tabbed formAn IDE style workspace: tool panels docked on every side, auto hidden or floating, a tabbed document area in the centre and a layout saved as JSON.
Docking manager Registered only
Applications with many tool windows need a workspace the user can arrange. TsgcVCLDockManager, TsgcFMXDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager and TsgcAvaloniaDockManager dock tool panels on the four sides of the form, in nested splits with splitters and in tabbed groups. The user drags a caption or a tab, and drop guides show where it can land: a compass on the group under the pointer splits that group on a side or tabs the panel into it, the edge guides dock it on an edge of the whole site, and a preview rectangle in the accent colour shows the room it will take. Esc cancels the drag. The Avalonia docking page shows TsgcAvaloniaDockManager in XAML and C#.
Panels.Add with Name, Caption, Placement and DockSize, and your own control as ControlDockPanel, ClosePanel, ShowPanel and ActivatePanel in codeOnPanelDock can refuse a dock, a float or an auto hide changeDocking manager Registered only
Tool panels that are only needed now and then should not take room all the time. The pin button of a caption auto hides its group: the panels become tabs on a thin strip at the side of the form, and hovering or clicking a tab slides the panel out over the content. It slides back when the user works elsewhere, and the pin button of the flyout docks the group again, on the side and at the size it had. On iOS and Android a tap opens the flyout.
Model.SetAutoHide(aPanel, True) in codeAutoHideDelay sets the hover delay, 400 ms by defaultCanAutoHide per panel, documents never auto hideDocking manager Registered only
A panel dropped away from the guides floats in a window of its own, which the user moves to another place or another monitor. A float holds a layout like the dock site, so more panels can be docked into it side by side or as tabs, and a double click on its caption docks it again. Floats are borderless tool windows owned by the form and kept out of the taskbar, with a drawn caption and a border that resizes them, and each one uses the scale of its own monitor. They work on the VCL, WinForms, WPF, Avalonia desktop applications and FireMonkey on Windows and macOS. On iOS and Android panels do not float, and a drag shows the guides only.
FloatPanel(aPanel, aLeft, aTop) in codeAllowFloating on the dock manager and CanFloat per panelPlacement := dplFloat starts a panel floating at FloatWidth by FloatHeightDocking manager Registered only
The centre of the dock site holds the documents: one or more document groups, each with a tab strip on top. The strip works like the navigation tabs, with drag reorder, pinned documents first, close buttons, a modified dot, a middle click to close, Ctrl+Tab and the list of every tab. Drag a document tab onto a side arm of the compass to split the area into two document groups, side by side or stacked, tear it off to float it, or double click it to maximize its group. The new tab button fires OnNewDocument, where your code creates the next document.
Kind := dpkDocument, with Pinned and Modified per panelDocumentTabSizing, DocumentCloseButtons, DocumentShowNewButton and DocumentShowListButtonOnActiveDocumentChange reports the active oneOnPanelClose can keep a document openDocking manager Registered only
Users expect to find their panels where they left them. SaveLayout writes the whole arrangement as compact JSON: the splits and their sizes, the groups and their active panels, the auto hidden groups of every side, the floats with their bounds, the maximized group and the hidden panels. LoadLayout restores it on the next start. The text is the same in Delphi and .NET, so one layout file serves both. A panel that the layout names but the form does not have yet, such as a document that was open, reaches OnRestorePanel, where your code creates its content or drops it.
SaveLayout, SaveLayoutToFile and SaveLayoutToStreamLoadLayout, LoadLayoutFromFile and LoadLayoutFromStream return False on a foreign text and change nothingOnRestorePanel for panels created at run timeRegistered edition on FireMonkey, VCL, WinForms, WPF and Avalonia, with C++ Builder support. Keyboard, UI Automation, right to left, themes and high DPI included.
Read the help topicRows carry more than a caption: an icon, a count and a link to the logic you already wrote.
Items that inform
Users should see that something needs attention before they open the page. Give an item a Badge, such as an unread count or the word New, and the bar draws it as a pill in the accent colour at the right of the row, with black or white text, whichever reads better. Set it from code whenever the value changes and the bar repaints itself. In the collapsed rail the badge becomes a dot on the icon. Because the badge is plain text, the same property covers counts, short labels and status words without any custom drawing code.
Badge is a short text per itemBadge draws nothingAccentColorHint to explain the count
Items that inform
Every row has an icon slot. Point the bar at the image list you already use and set ImageIndex per item, and masked or 32 bit images are converted once and cached until the list changes. No image list yet? Set a Glyph instead, a letter or short symbol that follows the theme colours, which is how the demos look. A disabled item paints its image at 40 percent opacity, so state is clear at a glance. Mixing both is fine: items with an image index show the image and the others fall back to their glyph, so you can add icons gradually.
Images and ImageIndex for image listsGlyph for a letter or symbol with no imagesItems that inform Registered only
Applications built on a TActionList already hold their commands, captions and enabled rules in one place. Link an item to any VCL or FireMonkey TAction through its Action property and its Caption, Enabled, Visible, Hint and ImageIndex follow the action. A click executes the action with the bar as its ActionComponent, and OnUpdate runs on idle, so an item greys out as soon as its action is disabled. In .NET the same job is done by Command and CommandParameter. One TActionList can drive the menu, the toolbar and the keyboard shortcuts of the form.
Action links an item to any TBasicActionOnClick runs instead of the actionSGC_NAVIGATION_ACTIONSCommand and CommandParameter with ICommandCommunity: assign the item OnClick or the bar OnItemClick instead of an action.
Read the help topicThe details that make the bar feel native and keep it consistent with the rest of your application.
Keyboard, themes and output
Power users switch pages without the mouse, and accessibility reviews expect it. The bar takes the focus with Tab and moves a focused row over the visible, enabled items: Up and Down step, Home and End jump, Enter or Space activates. In the accordion Left collapses a group and Right expands it. The dashed focus rectangle only appears while the keyboard is in use, and focus stays separate from the selected page. The same keys work in the FireMonkey bar through CanFocus, so desktop users get the same behaviour on every platform.
TabStop is on by default for the VCL barFocusedIndex of the model is the keyboard rowSelectedIndex stays the chosen page
Keyboard, themes and output
A menu that ignores the theme of the application looks bolted on. Theme sets the surface, border, text, group header, hover and accent colours from the shared sgcUICore tokens, so a bar and an sgcDashboard with the same Theme match exactly. AccentColor replaces the accent with your brand colour for the selection bar, the focus rectangle and the badges. A bar hosted in a dashboard tile follows the theme of the dashboard on its own. Switch the theme at run time and the bar repaints at once, ready for a dark mode toggle in your settings page.
Theme: utDefault (default, follows the application theme), utLight or utDarkAccentColor as a $AARRGGBB value, 0 keeps the theme accent
Keyboard, themes and output
Documentation, visual tests and web back ends sometimes need a picture of the menu, not the menu itself. The renderer in sgcNavigation_Render paints a TsgcNavigationModel with no window and no VCL or FireMonkey, so a console program, a service or a server produces the same bar as a PNG or SVG. The unit builds on every platform, Linux64 included, and a scale parameter gives sharp images for high DPI screens. Pass your image list to the renderer and the exported picture shows the same icons as the running application.
sgcNavigationSaveToPNG writes a PNG file or streamsgcNavigationSaveToSVG writes the same bar as SVGsgcNavigationRender paints on any sgcUICore canvassgcNavigation inside the sgcUI suite demos: complete applications that run offline with built-in simulated data.
The ERP sidebar groups ten modules under six headings.
Altamira ERP →
The trading desk shell: a collapsed icon rail beside the desk.
Altamira Markets →
The control room shell in the light theme.
Altamira Plant →
The PMO sidebar, with live badges for risks and overbooked people.
Altamira PMO →
You have dozens of existing forms and a main window that still opens them from a menu bar. Put a sidebar on the left, one item per area, and let OnSelectionChange switch the tabs of a TPageControl with hidden tabs. Badges show pending orders or unread messages, and the icon rail gives the forms their space back. Run SidebarApp to see the pattern working with an sgcDashboard page.
Configuration screens group dozens of pages under a few headings such as Sales, Inventory and Admin. The accordion keeps one section open at a time, or several with AllowMultiExpand, and the Action links reuse the commands and enabled rules of your TActionList. Keyboard users move through the sections with the arrow keys. The Accordion demo shows three groups, an expand toggle and a click log.
A FireMonkey application that runs on Windows, macOS, iOS and Android should not need a different menu on each. TsgcFMXNavigationBar has the same items, modes and events as the VCL bar, and the .NET bars for WinForms, WPF and Avalonia follow the same names. Teams that ship a Delphi desktop app and a .NET tool keep one mental model. SidebarFMX is the FireMonkey version of the sidebar demo.
The same API in FireMonkey, C#, Delphi VCL and C++ Builder: an accordion bar with groups, a badge, a disabled item and a Collapse button. The FireMonkey and C# tabs add a tab strip and a command palette.
uses
FMX.Types, FMX.Controls, FMX.Forms, FMX.StdCtrls,
sgcUICore_Theme, sgcNavigation_Model, sgcNavigation_FMX;
procedure TMainForm.CreateNavigation;
begin
// an accordion bar on the left, dark theme, several groups open at once
FNav := TsgcFMXNavigationBar.Create(Self);
FNav.Parent := Self;
FNav.Align := TAlignLayout.Left;
FNav.Mode := nbmAccordion;
FNav.AllowMultiExpand := True;
FNav.Theme := utDark;
// a group header (third parameter True), then the items under it
FNav.Items.AddItem('Sales', '', True);
FNav.Items.AddItem('Orders', 'O');
FNav.Items.AddItem('Invoices', 'I').Badge := '3';
FNav.Items.AddItem('Admin', '', True);
FNav.Items.AddItem('Users', 'U').Hint := 'Manage the users';
FNav.Items.AddItem('Billing', 'B').Enabled := False;
FNav.SelectedIndex := 1;
FNav.OnItemClick := NavItemClick;
FNav.OnSelectionChange := NavSelectionChange;
// a Collapse button folds the bar into an icon rail with an animation
FNav.AnimateCollapse := True;
FButton.Text := 'Collapse';
FButton.OnClick := ButtonClick;
end;
procedure TMainForm.NavItemClick(Sender: TObject; aItem: TsgcNavigationItem);
begin
Caption := 'Clicked: ' + aItem.Caption;
end;
procedure TMainForm.NavSelectionChange(Sender: TObject);
begin
FPage.Text := FNav.Items[FNav.SelectedIndex].Caption + ' page';
end;
procedure TMainForm.ButtonClick(Sender: TObject);
begin
FNav.Collapsed := not FNav.Collapsed;
end;uses
FMX.Types, FMX.Controls,
sgcNavigation_Tabs, sgcNavigation_Tabs_FMX,
sgcNavigation_Palette, sgcNavigation_Palette_FMX;
procedure TMainForm.CreateShell;
var
oTab: TsgcNavigationTab;
oCommand: TsgcCommandPaletteCommand;
begin
// a tab strip on top: every tab shows its own page
FTabs := TsgcFMXNavigationTabs.Create(Self);
FTabs.Parent := FContent;
FTabs.Align := TAlignLayout.Top;
oTab := FTabs.Tabs.AddTab('Orders');
oTab.Control := FOrdersPage;
FTabs.ActiveIndex := oTab.Index;
// the command palette (Registered edition), Ctrl+Shift+P opens it
FPalette := TsgcFMXCommandPalette.Create(Self);
oCommand := FPalette.Commands.AddCommand('Toggle sidebar', 'View', 'Ctrl+B');
oCommand.OnExecute := ButtonClick;
// every item of the bar becomes a "Go to" command
FPalette.Sources.AddSource(FNav);
end;procedure TMainForm.CreateNavigation;
var
oItem: TsgcNavigationItem;
begin
// an accordion bar on the left, dark theme, several groups open at once
FNav := TsgcVCLNavigationBar.Create(Self);
FNav.Parent := Self;
FNav.Align := alLeft;
FNav.Mode := nbmAccordion;
FNav.AllowMultiExpand := True;
FNav.Theme := utDark;
// a group header (third parameter True), then the items under it
FNav.Items.AddItem('Sales', '', True);
FNav.Items.AddItem('Orders', 'O');
FNav.Items.AddItem('Invoices', 'I').Badge := '3';
FNav.Items.AddItem('Admin', '', True);
oItem := FNav.Items.AddItem('Users', 'U');
oItem.Hint := 'Manage the users';
oItem := FNav.Items.AddItem('Billing', 'B');
oItem.Enabled := False;
FNav.SelectedIndex := 1;
FNav.OnItemClick := NavItemClick;
FNav.OnSelectionChange := NavSelectionChange;
// a Collapse button folds the bar into an icon rail with an animation
FNav.AnimateCollapse := True;
FButton.Caption := 'Collapse';
FButton.OnClick := ButtonClick;
end;
procedure TMainForm.NavItemClick(Sender: TObject; aItem: TsgcNavigationItem);
begin
Caption := 'Clicked: ' + aItem.Caption;
end;
procedure TMainForm.NavSelectionChange(Sender: TObject);
begin
FPanel.Caption := FNav.Items[FNav.SelectedIndex].Caption + ' page';
end;
procedure TMainForm.ButtonClick(Sender: TObject);
begin
FNav.Collapsed := not FNav.Collapsed;
end;A browser style window: TsgcVCLNavigationTabbedForm moves the tab strip into a themed title bar.
uses
Classes, Controls, Forms,
sgcNavigation_Tabs, sgcNavigation_Tabs_VCL, sgcNavigation_TabbedForm_VCL;
procedure TMainForm.CreateTabbedForm;
begin
// a browser style strip with close buttons and a new tab button
FTabs := TsgcVCLNavigationTabs.Create(Self);
FTabs.Parent := Self;
FTabs.ShowNewButton := True;
FTabs.CloseButtons := tcbAlways;
FTabs.Tabs.AddTab('Home');
FTabs.Tabs.AddTab('Orders');
FTabs.ActiveIndex := 0;
// the window frame: the strip moves into the themed title bar
FTabbedForm := TsgcVCLNavigationTabbedForm.Create(Self);
FTabbedForm.Tabs := FTabs;
// Registered edition: a tab dropped on another tabbed window moves there
FTabbedForm.TearOffMode := ttmEvent;
end;#include <vcl.h>
#include <Vcl.ExtCtrls.hpp>
#include "sgcUICore_Theme.hpp"
#include "sgcNavigation_Model.hpp"
#include "sgcNavigation_VCL.hpp"
class TNavHandler : public TObject
{
public:
TsgcVCLNavigationBar *Nav;
TPanel *Content;
void __fastcall ItemClick(TObject *Sender, TsgcNavigationItem *aItem);
void __fastcall SelectionChange(TObject *Sender);
void __fastcall CollapseClick(TObject *Sender);
};
void __fastcall TNavHandler::ItemClick(TObject *Sender, TsgcNavigationItem *aItem)
{
Content->Caption = "Clicked: " + aItem->Caption;
}
void __fastcall TNavHandler::SelectionChange(TObject *Sender)
{
Content->Caption = Nav->Items->Items[Nav->SelectedIndex]->Caption + " page";
}
void __fastcall TNavHandler::CollapseClick(TObject *Sender)
{
Nav->Collapsed = !Nav->Collapsed; // animated fold into an icon rail
}
void __fastcall CreateNavigation(TForm *Form, TNavHandler *Handler)
{
// an accordion bar on the left, dark theme, several groups open at once
TsgcVCLNavigationBar *Nav = new TsgcVCLNavigationBar(Form);
Nav->Parent = Form;
Nav->Align = alLeft;
Nav->Mode = nbmAccordion;
Nav->AllowMultiExpand = true;
Nav->AnimateCollapse = true;
Nav->Theme = utDark;
// a group header (third parameter true), then the items under it
Nav->Items->AddItem("Sales", "", true);
Nav->Items->AddItem("Orders", "O", false);
Nav->Items->AddItem("Invoices", "I", false)->Badge = "3";
Nav->Items->AddItem("Admin", "", true);
Nav->Items->AddItem("Users", "U", false)->Hint = "Manage the users";
Nav->Items->AddItem("Billing", "B", false)->Enabled = false;
Nav->SelectedIndex = 1;
TPanel *Content = new TPanel(Form);
Content->Parent = Form;
Content->Align = alClient;
Handler->Nav = Nav;
Handler->Content = Content;
Nav->OnItemClick = Handler->ItemClick;
Nav->OnSelectionChange = Handler->SelectionChange;
TButton *Button = new TButton(Form);
Button->Parent = Content;
Button->Caption = "Collapse";
Button->OnClick = Handler->CollapseClick;
}using System;
using System.Windows.Forms;
using esegece.sgcUICore;
using esegece.sgcNavigation;
internal class MainForm : Form
{
private readonly TsgcWinFormsNavigationBar Nav = new TsgcWinFormsNavigationBar();
private readonly Label lblPage = new Label { Dock = DockStyle.Fill };
private readonly Button btnCollapse = new Button { Text = "Collapse", Dock = DockStyle.Top };
public MainForm()
{
// an accordion bar on the left, dark theme, several groups open at once
Nav.Dock = DockStyle.Left;
Nav.Mode = TsgcNavigationMode.nbmAccordion;
Nav.AllowMultiExpand = true;
Nav.AnimateCollapse = true;
Nav.Theme = TsgcUITheme.utDark;
// a group header (third parameter true), then the items under it
Nav.Items.AddItem("Sales", "", true);
Nav.Items.AddItem("Orders", "O");
Nav.Items.AddItem("Invoices", "I").Badge = "3";
Nav.Items.AddItem("Admin", "", true);
Nav.Items.AddItem("Users", "U").Hint = "Manage the users";
Nav.Items.AddItem("Billing", "B").Enabled = false;
Nav.SelectedIndex = 1;
Nav.OnItemClick = (sender, item) => Text = "Clicked: " + item.Caption;
Nav.OnSelectionChange = sender => lblPage.Text = Nav.Items[Nav.SelectedIndex].Caption + " page";
// the Collapse button folds the bar into an icon rail with an animation
btnCollapse.Click += (s, e) => Nav.Collapsed = !Nav.Collapsed;
Controls.Add(lblPage);
Controls.Add(btnCollapse);
Controls.Add(Nav);
}
}// tabs and a command palette on the same form
private readonly TsgcWinFormsNavigationTabs Tabs = new TsgcWinFormsNavigationTabs();
private readonly TsgcWinFormsCommandPalette Palette = new TsgcWinFormsCommandPalette();
private void CreateShell(Control aOrdersPage)
{
// a tab strip on top: every tab shows its own page
Tabs.Dock = DockStyle.Top;
TsgcNavigationTab oTab = Tabs.Tabs.AddTab("Orders");
oTab.Control = aOrdersPage;
Tabs.ActiveIndex = oTab.Index;
Controls.Add(Tabs);
// the command palette (Registered edition), Ctrl+Shift+P on this form opens it
Palette.OwnerForm = this;
TsgcCommandPaletteCommand oCommand = Palette.Commands.AddCommand("Toggle sidebar", "View", "Ctrl+B");
oCommand.OnExecute = sender => Nav.Collapsed = !Nav.Collapsed;
// every item of the bar becomes a "Go to" command
Palette.Sources.AddSource(Nav);
}dotnet add package esegece.sgcNavigation.WinFormsThe NavigationShell and DockingShell demos ship for FireMonkey, VCL, WinForms, WPF and Avalonia. The sidebar demo ships for FireMonkey, and the SidebarApp and Accordion demos ship in the .NET edition as WinForms, WPF and Avalonia projects and for Delphi VCL and C++ Builder.
A complete navigation shell for FireMonkey, for Delphi only: a tree with a search row on the left, a tab per opened page, a breadcrumb that follows the tree, and a command palette (Ctrl+Shift+P) that lists the items of the bar and an action list. Dark theme and right to left toggles included. It uses the palette, so it needs the Registered or Trial edition.
An IDE style shell built on the docking manager, for the VCL and for FireMonkey: a navigation bar tree as Explorer on the left, Properties on the right, Output auto hidden at the bottom and memo documents with pinned and modified tabs in the centre. The command palette lists one Window command per panel, a theme switch and a Reset layout button are included, and the layout is saved to JSON on close and loaded on the next start.
The docking shell in the .NET edition: DockingShell for WinForms, DockingShellWpf and DockingShellAvalonia, each with docked, auto hidden and floating panels, the document area and the saved layout.
A browser style window with the tabs in the title bar, for the VCL and for FireMonkey, with C++ Builder twins: a new tab button, close buttons and a theme selector with light, dark, Fluent light and Fluent dark. Drag a tab off the strip and it opens in a new window that follows the pointer, then drop it on the title bar of another window. Tear-off needs the Registered edition. In the .NET edition it ships as TabbedForm for WinForms, TabbedFormWpf and TabbedFormAvalonia.
The sidebar demo built with TsgcFMXNavigationBar for FireMonkey, for Delphi only. The same items, modes and events as the VCL version, ready for Windows, macOS and mobile targets.
A sidebar that drives a page control with hidden tabs, with icons, a badge, a disabled item, a Collapse button, a theme combo and an sgcDashboard KPI page. Proves the application shell pattern end to end.
Three groups, Sales, Inventory and Admin, an AllowMultiExpand toggle, Action links and a click log. It uses Action links, so it needs the Registered or Trial edition.
Ready to run executables of every sgcUI product, nothing to install.
Download sgcUI_bin.zip →Five QuickStart demos for Delphi (VCL) ship in Demos\Navigation\Delphi\00.QuickStart. The PDF guide walks through them step by step: a first navigation bar, a menu built in code, document tabs, themes and styles, and a small mail client.
RAD Studio 13.2 Florence added two VCL controls, TNavigationView and TTabView. If your application is VCL only and you build with 13.2 or later, they are a good built-in choice. sgcNavigation adds value when the same navigation must run on FireMonkey and .NET, when you build with older Delphi versions, and when you need a breadcrumb, a command palette or a searchable tree.
TNavigationView is a vertical list of items with normal and compact modes, images, multiline text, scrolling and reordering by dragging, and it links its items to a multipage control, a frame or a TCardPanel. TTabView is a modern variant of TTabSet whose tabs host forms or other controls, with an image, multiline text and a close button on each tab, a button to add a tab, a dropdown list of every tab and scroll buttons. Both are well designed and follow the VCL programming model, so for a new VCL project on 13.2 they are worth a look.
sgcNavigation keeps one framework neutral model and one headless renderer behind every host. The bar, and the tabs, breadcrumb, multi-level tree and command palette that join it in this release, behave the same on FireMonkey, WinForms, WPF, Avalonia and the VCL of Delphi 7 to 13, so a product with a desktop, a mobile and a .NET front end navigates the same way everywhere.
| Topic | sgcNavigation | TNavigationView and TTabView (VCL, RAD Studio 13.2) |
|---|---|---|
| Frameworks | FireMonkey, WinForms, WPF, Avalonia and VCL | VCL |
| Delphi and C++ Builder versions | Delphi 7 to 13 (VCL), Delphi XE6 to 13 (FireMonkey), C++ Builder 2007 to 13 | RAD Studio 13.2 and later |
| .NET hosts | WinForms, WPF and Avalonia on .NET Framework 4.7.2, .NET 8, 9 and 10 | Not applicable, they are VCL controls |
| Linux headless rendering | PNG and SVG output on Linux64 from Delphi 10.2 | Not described in the 13.2 documentation |
| Shared model across frameworks | One framework neutral model, with the same names in Delphi and .NET | Not described in the 13.2 documentation |
| Breadcrumb | Breadcrumb bar that can follow the selected node of the bar | Not described in the 13.2 documentation |
| Command palette | Keyboard palette with fuzzy search over commands, items and actions | Not described in the 13.2 documentation |
| Tree search | Multi-level tree with a search row that keeps the parents of every match visible | Not described in the 13.2 documentation |
The details of TNavigationView and TTabView come from the Embarcadero RAD Studio 13 Florence Release 2 notes.
sgcNavigation is in every sgcUI edition, starting with Standard, and it is also sold on its own. sgcNavigation is also included in the All-Access bundle.
€149 / developer, full source code, 1 year of updates.
Buy sgcNavigation → See pricing →The free Community edition (esegece.sgcNavigation.Community on NuGet) has the bar with tree mode and search, the basic tabs and breadcrumb, the tabbed form with the tabs in the title bar and the command source interface. The Registered edition adds the command palette, tab reorder, pinned tabs, tear-off and the saved tab layout, the breadcrumb edit mode, the docking manager and the Action links of the items.
| Feature | Community (free) | Registered |
|---|---|---|
| Sidebar and accordion modes | ✓ | ✓ |
| Collapse to an animated icon rail | ✓ | ✓ |
| Icons, glyphs and badges | ✓ | ✓ |
| Keyboard navigation | ✓ | ✓ |
| Light and dark themes, accent colour | ✓ | ✓ |
| Headless PNG and SVG output | ✓ | ✓ |
| Multi-level tree mode and search | ✓ | ✓ |
| Tabs: sizing, close buttons, list and new tab buttons, scrolling, keyboard | ✓ | ✓ |
| Tabbed form: the tabs in a themed title bar | ✓ | ✓ |
| Breadcrumb: segments, chevrons, overflow, link to a bar | ✓ | ✓ |
| Command sources (IsgcUICommandSource) | ✓ | ✓ |
| Command palette | − | ✓ |
| Tab drag reorder, pinned tabs, tear-off, saved tab layout | − | ✓ |
| Tabbed form tear-off into a new window | − | ✓ |
| Breadcrumb edit mode | − | ✓ |
| Docking manager | − | ✓ |
| Action links (Delphi) and Command (.NET) | − | ✓ |
| Component | Target |
|---|---|
| TsgcFMXNavigationBar | Delphi and C++ Builder, FireMonkey (sgcNavigation_FMX) |
| TsgcWinFormsNavigationBar | .NET, WinForms |
| TsgcWpfNavigationBar | .NET, WPF |
| TsgcAvaloniaNavigationBar | .NET, Avalonia |
| TsgcVCLNavigationBar | Delphi and C++ Builder, VCL (sgcNavigation_VCL) |
| TsgcFMXNavigationTabs, TsgcFMXNavigationBreadcrumb, TsgcFMXCommandPalette | Delphi and C++ Builder, FireMonkey (sgcNavigation_Tabs_FMX, sgcNavigation_Palette_FMX) |
| TsgcWinFormsNavigationTabs, TsgcWpfNavigationTabs, TsgcAvaloniaNavigationTabs | .NET, WinForms, WPF and Avalonia, with the matching Breadcrumb and CommandPalette classes |
| TsgcVCLNavigationTabs, TsgcVCLNavigationBreadcrumb, TsgcVCLCommandPalette | Delphi and C++ Builder, VCL (sgcNavigation_Tabs_VCL, sgcNavigation_Palette_VCL) |
| TsgcVCLNavigationTabbedForm, TsgcFMXNavigationTabbedForm | Delphi and C++ Builder, VCL and FireMonkey (sgcNavigation_TabbedForm_VCL, sgcNavigation_TabbedForm_FMX), the themed title bar on Windows |
| TsgcWinFormsNavigationTabbedForm, TsgcWpfNavigationTabbedWindow, TsgcAvaloniaNavigationTabbedWindow | .NET, WinForms, WPF and Avalonia |
| TsgcVCLDockManager, TsgcFMXDockManager | Delphi and C++ Builder, VCL and FireMonkey (sgcNavigation_Dock_VCL, sgcNavigation_Dock_FMX), Registered edition |
| TsgcWinFormsDockManager, TsgcWpfDockManager, TsgcAvaloniaDockManager | .NET, WinForms, WPF and Avalonia, Registered edition |
| TsgcNavigationItem, TsgcNavigationItems, TsgcNavigationModel | Framework neutral model (sgcNavigation_Model) |
| Target | Component | Platforms |
|---|---|---|
| Delphi XE6 to 13, FireMonkey | TsgcFMXNavigationBar | Windows, macOS, iOS, Android and Linux (FMXLinux) |
| .NET Framework 4.7.2, .NET 8, 9 and 10 | TsgcWinFormsNavigationBar, WPF and Avalonia bars | WinForms, WPF and Avalonia |
| Delphi 7 to 13, VCL | TsgcVCLNavigationBar | Win32 and Win64 |
| C++ Builder 2007 to 13 | TsgcVCLNavigationBar, TsgcFMXNavigationBar | Generated .hpp headers and static libraries |
| Delphi 10.2 to 13, framework neutral | Model and headless PNG and SVG renderer | Linux64, for example to render a bar on a server |
If your application is VCL only, TNavigationView and TTabView in RAD Studio 13.2 are a good built-in choice and we are happy to recommend them. sgcNavigation is the better fit when the same navigation must also run in FireMonkey on macOS, iOS, Android or Linux, or in a WinForms, WPF or Avalonia application, when part of your team still builds with an older Delphi or C++ Builder, or when you want a breadcrumb, a command palette or a multi-level tree with search on top of the sidebar. The model and the headless PNG and SVG renderer are shared by every host. See Choosing for a side by side table.
Yes, in the Registered edition. TsgcFMXCommandPalette, TsgcVCLCommandPalette and the WinForms, WPF and Avalonia palettes open with Ctrl+Shift+P, rank the commands by a fuzzy match as the user types and show the recently used commands first. Besides its own commands, the palette lists every command source you add: the items of a navigation bar, the commands of a ribbon or a toolbar in Delphi, the actions of an action list, or a source of your own through the IsgcUICommandSource interface. In .NET a command can carry an ICommand. See the command palette.
Both. The Mode property switches between nbmSidebar and nbmAccordion on the same control, with the same items and events, so you can change your mind late in the project or offer both styles as a user preference. Each mode also folds into the collapsed icon rail.
Yes. Handle OnSelectionChange and show the page that matches SelectedIndex, for example the tab of a TPageControl with hidden tabs, or create a frame on demand. The SidebarApp demo is built exactly this way and hosts an sgcDashboard KPI page.
Yes. TsgcFMXNavigationBar targets Windows, macOS, iOS, Android and Linux (FMXLinux) from Delphi XE6, with the same items, modes and events as the VCL bar. FireMonkey image lists need Delphi XE8 or later; older versions use the Glyph of each item.
The command palette, tab drag reorder, pinned tabs and tear-off, the breadcrumb edit mode, the docking manager and the Action links of the items, which in .NET are the Command and CommandParameter properties. Use the item OnClick or the bar OnItemClick instead of the Action links. Every other feature, including the tree with search, the tabs, the icon rail, badges, themes and headless output, is in Community. See Editions.
No. The .NET port has no designer verbs or collection editor, so items are not serialized and you add them in code, usually in the constructor of the form or window. In Delphi and C++ Builder the Items collection is edited at design time with the standard collection editor.
Yes. All sizes are logical pixels multiplied by the scale of the monitor, so the rows, icons and badges are sharp at any DPI. In WinForms the widths and heights scale with DPI / 96 as in VCL, and in WPF and Avalonia they are device independent units.
Yes. sgcNavigationSaveToPNG and sgcNavigationSaveToSVG render a bar from its model without a window and without VCL or FireMonkey, also on Linux64 from Delphi 10.2. Use it for documentation, visual regression tests or a web page that shows the menu of your application.
No. On iOS and Android the panels of TsgcFMXDockManager dock, split, tab and auto hide, but they do not float: AllowFloating is forced to False, a tap opens an auto hidden panel because there is no hover, a long press opens the panel menu and a drag shows the drop guides only. Floating windows work on the VCL, WinForms, WPF, Avalonia desktop applications and FireMonkey on Windows and macOS. A layout saved on the desktop still loads on a phone: the panels of its floats keep their initial placement. See Floating windows.
Introduction, Quick Start VCL, Quick Start FireMonkey, TsgcVCLNavigationBar, Sidebar mode, Accordion mode, Collapse, Badges, Themes, Editions, Platforms.
Introduction, Quick Start C++ Builder, TsgcVCLNavigationBar, Collapse, Demos.
.NET overview, Quick Start WinForms, Quick Start WPF, Quick Start Avalonia, Differences from Delphi.
Delphi, C++ Builder and .NET, covering every sgcUI product.
Add a toolbar and a status bar with the same theme tokens and you have a complete application shell around your forms.
Explore sgcToolbar →
Host a KPI dashboard on the page beside the bar, as the SidebarApp demo does, and the bar follows its theme.
Explore sgcDashboard →
Show the records of the selected area in a live data grid that updates by key from any thread.
Explore sgcGrid →