diff --git a/blazor/scheduler/header-bar.md b/blazor/scheduler/header-bar.md
index 83df66b259..79fadafe6a 100644
--- a/blazor/scheduler/header-bar.md
+++ b/blazor/scheduler/header-bar.md
@@ -48,6 +48,148 @@ By default, the header bar holds the date and view navigation options, through w
+## Customizing header bar using template
+
+Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by using the `ScheduleToolBar` child component along with `ScheduleToolBarCustom` for custom content. The Scheduler provides built-in toolbar components such as `ScheduleToolBarPrevious`, `ScheduleToolBarNext`, `ScheduleToolBarDateRange`, `ScheduleToolBarToday`, and `ScheduleToolBarViews` to display the default navigation and view options. For custom items, use the `ScheduleToolBarCustom` component, which supports the following types via its `Type` property: `Button`, `Separator`, `Input`, and `Spacer`. In this example, the default items (Previous, Next, Date Range Text, Today) are used alongside a dropdown list (added via `ScheduleToolBarCustom`) to filter appointments by owner.
+
+```cshtml
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Schedule
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Navigations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfSchedule? ScheduleObj;
+ private Query? EventQuery { get; set; }
+ private Query? ResourceQuery { get; set; }
+ private List OwnerCollections = new List();
+ private List DataSource = new List();
+ private int SelectedOwner = 1;
+ protected override void OnInitialized()
+ {
+ OwnerCollections = new List
+ {
+ new OwnerData { OwnerId = 1, OwnerText = "Nancy", Color = "#ea7a57" },
+ new OwnerData { OwnerId = 2, OwnerText = "Steven", Color = "#7fa900" },
+ new OwnerData { OwnerId = 3, OwnerText = "Michael", Color = "#5978ee" }
+ };
+ InitializeAppointments();
+ EventQuery = new Query().Where("OwnerId", "equal", SelectedOwner);
+ ResourceQuery = new Query().Where("OwnerId", "equal", SelectedOwner);
+ }
+ private void InitializeAppointments()
+ {
+ DataSource = new List
+ {
+ new AppointmentData
+ {
+ Id = 1,
+ Subject = "Project Meeting",
+ StartTime = new DateTime(2025, 12, 2, 9, 0, 0),
+ EndTime = new DateTime(2025, 12, 2, 10, 30, 0),
+ OwnerId = 1,
+ Description = "Project discussion with Nancy"
+ },
+ new AppointmentData
+ {
+ Id = 4,
+ Subject = "Design Discussion",
+ StartTime = new DateTime(2025, 12, 2, 10, 0, 0),
+ EndTime = new DateTime(2025, 12, 2, 11, 30, 0),
+ OwnerId = 2,
+ Description = "Design review with Steven"
+ },
+ new AppointmentData
+ {
+ Id = 7,
+ Subject = "Budget Meeting",
+ StartTime = new DateTime(2025, 12, 2, 9, 30, 0),
+ EndTime = new DateTime(2025, 12, 2, 11, 0, 0),
+ OwnerId = 3,
+ Description = "Budget discussion with Michael"
+ },
+ };
+ }
+ private async void OnOwnerChange(ChangeEventArgs args)
+ {
+ int value = args.Value;
+ SelectedOwner = value;
+ EventQuery = new Query().Where("OwnerId", "equal", SelectedOwner);
+ ResourceQuery = new Query().Where("OwnerId", "equal", SelectedOwner);
+ if (ScheduleObj != null)
+ {
+ await ScheduleObj.RefreshAsync(true);
+ }
+ }
+ public class OwnerData
+ {
+ public int OwnerId { get; set; }
+ public string? OwnerText { get; set; }
+ public string? Color { get; set; }
+ }
+ public class AppointmentData
+ {
+ public int Id { get; set; }
+ public string? Subject { get; set; }
+ public DateTime StartTime { get; set; }
+ public DateTime EndTime { get; set; }
+ public string? Description { get; set; }
+ public int OwnerId { get; set; }
+ public bool IsAllDay { get; set; }
+ public string? RecurrenceRule { get; set; }
+ public string? RecurrenceException { get; set; }
+ public Nullable RecurrenceID { get; set; }
+ }
+}
+```
+
+The Scheduler with custom toolbar items alongside the default navigation in the header bar will be rendered as shown in the following image.
+
+
+
## How to display the view options within the header bar popup
By default, the header bar holds the view navigation options, through which the user can switch between various views. You can move this view options to the header bar popup by setting `true` to the [`EnableAdaptiveUI`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_EnableAdaptiveUI) property.
diff --git a/blazor/scheduler/images/blazor-scheduler-toolbar-template.png b/blazor/scheduler/images/blazor-scheduler-toolbar-template.png
new file mode 100644
index 0000000000..fac2834596
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-toolbar-template.png differ