diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor
index 17aae064c..1ca81a007 100644
--- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor
+++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor
@@ -30,10 +30,10 @@
             new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"},
 
             new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms" },
-            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
-            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
-            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
-            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
+            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8", Class="px-3"},
+            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8", Class="px-3"},
+            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8", Class="px-3"},
+            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8", Class="px-3"},
         };
 
         return navItems;
diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor b/blazorbootstrap/Components/Sidebar/SidebarItem.razor
index aeebc213d..11e9bc5e6 100644
--- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor
+++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor
@@ -65,7 +65,8 @@
                          Href="@childItem.Href"
                          Text="@childItem.Text"
                          Target="@childItem.Target"
-                         Match="@childItem.Match"/>
+                         Match="@childItem.Match"
+                         Class="@childItem.Class" />
         }
     }
 </div>
\ No newline at end of file
diff --git a/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor b/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor
index e3f52224a..22cf41a86 100644
--- a/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor
+++ b/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor
@@ -14,7 +14,8 @@
                          Target="@item.Target"
                          Match="@item.Match"
                          HasChilds="@item.HasChilds"
-                         ChildItems="@item.ChildItems"/>
+                         ChildItems="@item.ChildItems"
+                         Class="@item.Class"/>
         }
     }
 </nav>
\ No newline at end of file
diff --git a/blazorbootstrap/Models/NavItem.cs b/blazorbootstrap/Models/NavItem.cs
index 2ae798d50..0d8c444fd 100644
--- a/blazorbootstrap/Models/NavItem.cs
+++ b/blazorbootstrap/Models/NavItem.cs
@@ -57,6 +57,11 @@ public class NavItem
     /// Gets or sets the navigation link text.
     /// </summary>
     public string? Text { get; set; }
+    
+    /// <summary>
+    /// Gets or sets an additional css class for the item
+    /// </summary>
+    public string? Class { get; set; }
 
     #endregion
 }