Skip to main content
Table of Contents

Getting started

Requirements

  • Delphi 10.1 Berlin or later
  • TMS FNC Core (required dependency)
  • TMS FNC UI Pack

Drop the component

  1. Drop a TTMSFNCNavigationPanel onto a form.
  2. Set Align to Left to dock it as a sidebar.
  3. Add items in the Object Inspector by expanding Panels, or at runtime with the Panels collection / the AddPanel helper.

Minimal example

This docks the panel, replaces the sample items with three of your own, and switches a content area when an item is clicked:

Minimal navigation panelPascalC++
procedure TForm1.FormCreate(Sender: TObject);
begin
  NavigationPanel1.Align := TAlignLayout.Left;
  NavigationPanel1.Width := 220;

  NavigationPanel1.BeginUpdate;
  try
    NavigationPanel1.Panels.Clear;
    NavigationPanel1.AddPanel('Mail');
    NavigationPanel1.AddPanel('Calendar');
    NavigationPanel1.AddPanel('Contacts');
  finally
    NavigationPanel1.EndUpdate;
  end;

  NavigationPanel1.ActivePanelIndex := 0;
end;

procedure TForm1.NavigationPanel1ItemClick(Sender: TObject; AItemIndex: Integer);
begin
  // Show the view that matches the clicked item.
  ContentLayout.Visible := True;
  Caption := 'Selected panel ' + IntToStr(AItemIndex);
end;

void __fastcall TForm1::FormCreate(TObject *Sender)
{
  NavigationPanel1->Align = TAlignLayout::Left;
  NavigationPanel1->Width = 220;

  NavigationPanel1->BeginUpdate();
  try
  {
    NavigationPanel1->Panels->Clear();
    NavigationPanel1->AddPanel("Mail");
    NavigationPanel1->AddPanel("Calendar");
    NavigationPanel1->AddPanel("Contacts");
  }
  __finally
  {
    NavigationPanel1->EndUpdate();
  }

  NavigationPanel1->ActivePanelIndex = 0;
}

void __fastcall TForm1::NavigationPanel1ItemClick(TObject *Sender, int AItemIndex)
{
  // Show the view that matches the clicked item.
  ContentLayout->Visible = true;
  Caption = "Selected panel " + IntToStr(AItemIndex);
}
A docked navigation panel with three items A docked navigation panel with three items

Note

The collection property is Panels, not Items. AddPanel(AText) adds an item and sets both its Text and CompactText; for finer control add through Panels.Add and set the item properties individually.

Next steps