diff --git a/docs/blog/2023-10-14-blazorbootstrap-1.10.3.md b/docs/blog/2023-10-14-blazorbootstrap-1.10.3.md
index d02de7d81..871e353a4 100644
--- a/docs/blog/2023-10-14-blazorbootstrap-1.10.3.md
+++ b/docs/blog/2023-10-14-blazorbootstrap-1.10.3.md
@@ -17,11 +17,14 @@ We are excited to release 1.10.3 with enhancements to dropdown, icons, and other
## What's changed
- `Dropdown` component
- - Add feature to disable Dropdown [#373](https://github.com/vikramlearning/blazorbootstrap/issues/352)
+ - Add feature to disable Dropdown [#373](https://github.com/vikramlearning/blazorbootstrap/issues/373)
- `Icon` component
- Sizing for icons in buttons is strange [#346](https://github.com/vikramlearning/blazorbootstrap/issues/346)
+- `Sidebar` component
+ - Sidebar: Add option to space items [#276](https://github.com/vikramlearning/blazorbootstrap/issues/276)
+
## Links
- [Demo Website - Blazor Server](https://demos.blazorbootstrap.com/)
- [Demo Website - Blazor WebAssembly](https://demos.getblazorbootstrap.com/)
diff --git a/docs/docs/05-components/sidebar.md b/docs/docs/05-components/sidebar.md
index ab83cd7cf..1eebdd613 100644
--- a/docs/docs/05-components/sidebar.md
+++ b/docs/docs/05-components/sidebar.md
@@ -35,16 +35,17 @@ Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, res
| Name | Type | Default | Required | Descritpion | Added Version |
|:--|:--|:--|:--|:--|:--|
-| CustomIconName | string | | | Gets or sets the custom icon name. | 1.4.0 |
-| Href | string | | ✔️ | Gets or sets the href. | 1.4.0 |
+| Class | `string?` | null | | Gets or sets an additional CSS class. | 1.10.3 |
+| CustomIconName | `string?` | null | | Gets or sets the custom icon name. | 1.4.0 |
+| Href | `string?` | | ✔️ | Gets or sets the href. | 1.4.0 |
| IconColor | `IconColor` | `IconColor.None` | | Gets or sets the icon color. | 1.4.0 |
| IconName | `IconName` | `IconName.None` | | Gets or sets the icon name. | 1.4.0 |
-| Id | string | | | Gets or sets the Id. | 1.4.0 |
+| Id | `string?` | null | | Gets or sets the Id. | 1.4.0 |
| Match | `NavLinkMatch` | `NavLinkMatch.Prefix` | | Gets or sets the URL matching behavior. | 1.4.0 |
-| ParentId | string | | | Gets or sets the parent Id. | 1.4.0 |
+| ParentId | `string?` | null | | Gets or sets the parent Id. | 1.4.0 |
| Sequence | int | | | Gets or sets the sequence. | 1.4.0 |
| Target | `Target` | `Target.None` | | Gets or sets the target. | 1.4.0 |
-| Text | string | | ✔️ | Gets or sets the navigation link text. | 1.4.0 |
+| Text | `string?` | | ✔️ | Gets or sets the navigation link text. | 1.4.0 |
## Examples
@@ -639,3 +640,56 @@ Developers can customize the sidebar color by changing the CSS variables, as men
```
[See demo here.](https://demos.blazorbootstrap.com/sidebar#customize-sidebar)
+
+### Apply custom CSS class to NavItem
+
+Set the Class property of a NavItem to apply a custom CSS class.
+
+
+
+```cshtml {} showLineNumbers
+
+```
+
+```cshtml {} showLineNumbers
+@code {
+ Sidebar sidebar;
+ IEnumerable navItems;
+
+ private async Task SidebarDataProvider(SidebarDataProviderRequest request)
+ {
+ if (navItems is null)
+ navItems = GetNavItems();
+
+ return await Task.FromResult(request.ApplyTo(navItems));
+ }
+
+ private IEnumerable GetNavItems()
+ {
+ navItems = new List
+ {
+ new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},
+
+ new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content" },
+ new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},
+
+ new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components" },
+ new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4", Class="px-3"},
+ new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4", Class="px-3"},
+ new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4", Class="px-3"},
+
+ 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"},
+ };
+
+ return navItems;
+ }
+}
+```
+[See demo here.](https://demos.blazorbootstrap.com/sidebar#apply-custom-css-class-to-navitem)