diff --git a/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj b/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj
index e91aafa65..c8527ced6 100644
--- a/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj
+++ b/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj
@@ -20,6 +20,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <Folder Include="Pages\Ribbon\" />
     <Folder Include="Pages\SortableList\" />
   </ItemGroup>
 
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Pages/Index.razor
index 317b19b47..453fa0677 100644
--- a/BlazorBootstrap.Demo.RCL/Pages/Index.razor
+++ b/BlazorBootstrap.Demo.RCL/Pages/Index.razor
@@ -160,6 +160,11 @@
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Sliders" class="me-2" /> Range Input</h4>
             </a>
         </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/ribbon">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Ribbon <Badge Color="BadgeColor.Danger">New</Badge></h4>
+            </a>
+        </div>
         <div class="col-sm-4 mb-2">
             <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/script-loader">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CodeSlash" class="me-2" /> Script Loader</h4>
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Ribbon/RibbonDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Ribbon/RibbonDocumentation.razor
new file mode 100644
index 000000000..bf81f641b
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Pages/Ribbon/RibbonDocumentation.razor
@@ -0,0 +1,29 @@
+@page "/ribbon"
+
+<PageTitle>@title</PageTitle>
+
+<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
+
+<h1>Blazor Ribbon</h1>
+<div class="lead mb-3">Documentation and examples for using the Blazor Bootstrap Ribbon component.</div>
+
+@* <CarbonAds /> *@
+
+<SectionHeading Size="HeadingSize.H2" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
+<div class="mb-3">In the following example, you will see a ribbon similar to the one found in Outlook.</div>
+<Demo Type="typeof(Ribbon_Demo_01_How_It_Works)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Other icons" PageUrl="@pageUrl" HashTagName="other-icons" />
+<div class="mb-3">In the following example, instead of icons like Bootstrap, Font Awesome, etc., we used PNG icons.</div>
+<Demo Type="typeof(Ribbon_Demo_02_Images)" Tabs="true" />
+
+<Callout Type="CalloutType.Warning" HideHeading="true">
+    <b>NOTE:</b> All the PNG icons used on this page are from Flaticon with a premium license only.
+</Callout>
+
+@code {
+    private string pageUrl = "/ribbon";
+    private string title = "Blazor Ribbon Component";
+    private string description = "Documentation and examples for using the Blazor Bootstrap Ribbon component.";
+    private string imageUrl = "https://i.imgur.com/LpZVLbF.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Ribbon/Ribbon_Demo_01_How_It_Works.razor b/BlazorBootstrap.Demo.RCL/Pages/Ribbon/Ribbon_Demo_01_How_It_Works.razor
new file mode 100644
index 000000000..9f1e82eb2
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Pages/Ribbon/Ribbon_Demo_01_How_It_Works.razor
@@ -0,0 +1,59 @@
+<Ribbon OnClick="OnRibbonItemClick">
+    <RibbonTab Title="Home" IsActive="true">
+        <Content>
+            <!-- New -->
+            <RibbonItemGroup Text="New">
+                <RibbonItem Name="NewEmail" IconName="IconName.EnvelopePlus" IconSize="IconSize.x3" IsFirstItem="true">New<br />Email</RibbonItem>
+                <RibbonItem Name="Appointment" IconName="IconName.Calendar3Event" IconSize="IconSize.x3" Text="Appointment" IsLastItem="true" />
+            </RibbonItemGroup>
+            <!-- Delete -->
+            <RibbonItemGroup Text="Delete">
+                <RibbonItem Name="Delete" IconColor="IconColor.Danger" IconName="IconName.Trash" IconSize="IconSize.x3" Text="Delete" IsFirstItem="true" />
+                <RibbonItem Name="Archive" IconColor="IconColor.Primary" IconName="IconName.Archive" IconSize="IconSize.x3" Text="Archive" IsLastItem="true" />
+            </RibbonItemGroup>
+        </Content>
+    </RibbonTab>
+    <RibbonTab Title="Send / Receive">
+        <Content>
+            <!-- Send & Receive -->
+            <RibbonItemGroup Text="Send & Receive">
+                <RibbonItem Name="SendReceiveAllFolders" IconColor="IconColor.Success" IconName="IconName.EnvelopePlus" IconSize="IconSize.x3" IsFirstItem="true">Send/Receive<br />All Folders</RibbonItem>
+                <RibbonItem Name="UpdateFolder" IconColor="IconColor.Primary" IconName="IconName.Calendar3Event" IconSize="IconSize.x3" IsLastItem="true">Update<br />Folder</RibbonItem>
+            </RibbonItemGroup>
+            <!-- Download -->
+            <RibbonItemGroup Text="Download">
+                <RibbonItem Name="ShowProgress" IconColor="IconColor.Success" IconName="IconName.Trash" IconSize="IconSize.x3" IsFirstItem="true">Show<br />Progress</RibbonItem>
+                <RibbonItem Name="CancelAll" IconColor="IconColor.Primary" IconName="IconName.XSquareFill" IconSize="IconSize.x3" IsLastItem="true">Cancel<br />All</RibbonItem>
+            </RibbonItemGroup>
+        </Content>
+    </RibbonTab>
+    <RibbonTab Title="Folder">
+        <Content>
+            <!-- New -->
+            <RibbonItemGroup Text="New">
+                <RibbonItem Name="NewFolder" IconColor="IconColor.Success" IconName="IconName.FolderPlus" IconSize="IconSize.x3" IsFirstItem="true">New<br />Folder</RibbonItem>
+                <RibbonItem Name="NewSearchFolder" IconColor="IconColor.Primary" IconName="IconName.Search" IconSize="IconSize.x3" IsLastItem="true">New<br />Search Folder</RibbonItem>
+            </RibbonItemGroup>
+            <!-- Actions -->
+            <RibbonItemGroup Text="Actions">
+                <RibbonItem Name="RenameFolder" IconColor="IconColor.Success" IconName="IconName.CursorText" IconSize="IconSize.x3" IsFirstItem="true">Rename<br />Folder</RibbonItem>
+                <RibbonItem Name="CopyFolder" IconColor="IconColor.Primary" IconName="IconName.Copy" IconSize="IconSize.x3">Copy<br />Folder</RibbonItem>
+                <RibbonItem Name="MoveFolder" IconColor="IconColor.Primary" IconName="IconName.ArrowRight" IconSize="IconSize.x3">Move<br />Folder</RibbonItem>
+                <RibbonItem Name="DeleteFolder" IconColor="IconColor.Primary" IconName="IconName.FolderX" IconSize="IconSize.x3" IsLastItem="true">Delete<br />Folder</RibbonItem>
+            </RibbonItemGroup>
+        </Content>
+    </RibbonTab>
+</Ribbon>
+
+<div class="mt-2">
+    Selected ribbon item: @selectedRibbonItem
+</div>
+
+@code {
+    string? selectedRibbonItem;
+
+    private void OnRibbonItemClick(RibbonItemEventArgs args)
+    {
+        selectedRibbonItem = args.Name;
+    }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Ribbon/Ribbon_Demo_02_Images.razor b/BlazorBootstrap.Demo.RCL/Pages/Ribbon/Ribbon_Demo_02_Images.razor
new file mode 100644
index 000000000..721305fe1
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Pages/Ribbon/Ribbon_Demo_02_Images.razor
@@ -0,0 +1,59 @@
+<Ribbon OnClick="OnRibbonItemClick">
+    <RibbonTab Title="Home">
+        <Content>
+            <!-- New -->
+            <RibbonItemGroup Text="New">
+                <RibbonItem Name="NewEmail" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/new-email.png" IsFirstItem="true">New<br />Email</RibbonItem>
+                <RibbonItem Name="Appointment" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/calendar.png" Text="Appointment" IsLastItem="true" />
+            </RibbonItemGroup>
+            <!-- Delete -->
+            <RibbonItemGroup Text="Delete">
+                <RibbonItem Name="Delete" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/bin.png" Text="Delete" IsFirstItem="true" />
+                <RibbonItem Name="Archive" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/archive.png" Text="Archive" IsLastItem="true" />
+            </RibbonItemGroup>
+        </Content>
+    </RibbonTab>
+    <RibbonTab Title="Send / Receive" IsActive="true">
+        <Content>
+            <!-- Send & Receive -->
+            <RibbonItemGroup Text="Send & Receive">
+                <RibbonItem Name="SendReceiveAllFolders" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/refresh.png" IsFirstItem="true">Send/Receive<br />All Folders</RibbonItem>
+                <RibbonItem Name="UpdateFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-sync.png" IsLastItem="true">Update<br />Folder</RibbonItem>
+            </RibbonItemGroup>
+            <!-- Download -->
+            <RibbonItemGroup Text="Download">
+                <RibbonItem Name="ShowProgress" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/loading-bar.png" IsFirstItem="true">Show<br />Progress</RibbonItem>
+                <RibbonItem Name="CancelAll" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/cancelled.png" IsLastItem="true">Cancel<br />All</RibbonItem>
+            </RibbonItemGroup>
+        </Content>
+    </RibbonTab>
+    <RibbonTab Title="Folder" IsActive="true">
+        <Content>
+            <!-- New -->
+            <RibbonItemGroup Text="New">
+                <RibbonItem Name="NewFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-add.png" IsFirstItem="true">New<br />Folder</RibbonItem>
+                <RibbonItem Name="NewSearchFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-search.png" IsLastItem="true">New<br />Search Folder</RibbonItem>
+            </RibbonItemGroup>
+            <!-- Actions -->
+            <RibbonItemGroup Text="Actions">
+                <RibbonItem Name="RenameFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-rename.png" IsFirstItem="true">Rename<br />Folder</RibbonItem>
+                <RibbonItem Name="CopyFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-copy.png">Copy<br />Folder</RibbonItem>
+                <RibbonItem Name="MoveFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-move.png">Move<br />Folder</RibbonItem>
+                <RibbonItem Name="DeleteFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-delete.png" IsLastItem="true">Delete<br />Folder</RibbonItem>
+            </RibbonItemGroup>
+        </Content>
+    </RibbonTab>
+</Ribbon>
+
+<div class="mt-2">
+    Selected ribbon item: @selectedRibbonItem
+</div>
+
+@code {
+    string? selectedRibbonItem;
+
+    private void OnRibbonItemClick(RibbonItemEventArgs args)
+    {
+        selectedRibbonItem = args.Name;
+    }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs
index 26b3a5edb..ce35e1bab 100644
--- a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs
+++ b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs
@@ -64,14 +64,15 @@ private IEnumerable<NavItem> GetNavItems()
             new (){ Id = "516", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" },
             new (){ Id = "517", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" },
             new (){ Id = "518", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" },
-            new (){ Id = "519", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" },
-            new (){ Id = "520", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" },
-            new (){ Id = "521", Text = "Sidebar 2", Href = "/sidebar2", IconName = IconName.ListNested, ParentId = "5" },
-            new (){ Id = "521", Text = "Sortable List", Href = "/sortable-list", IconName = IconName.ArrowsMove, ParentId = "5" },
-            new (){ Id = "522", Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat, ParentId = "5" },
-            new (){ Id = "523", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
-            new (){ Id = "524", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
-            new (){ Id = "525", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
+            new (){ Id = "519", Text = "Ribbon", Href = "/ribbon", IconName = IconName.WindowStack, ParentId = "5" },
+            new (){ Id = "520", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" },
+            new (){ Id = "521", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" },
+            new (){ Id = "522", Text = "Sidebar 2", Href = "/sidebar2", IconName = IconName.ListNested, ParentId = "5" },
+            new (){ Id = "523", Text = "Sortable List", Href = "/sortable-list", IconName = IconName.ArrowsMove, ParentId = "5" },
+            new (){ Id = "524", Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat, ParentId = "5" },
+            new (){ Id = "525", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
+            new (){ Id = "526", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
+            new (){ Id = "527", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
 
             new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning },
             new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All },
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/blazorbootstrap.demo.rcl.css b/BlazorBootstrap.Demo.RCL/wwwroot/css/blazorbootstrap.demo.rcl.css
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/wwwroot/blazorbootstrap.demo.rcl.css
rename to BlazorBootstrap.Demo.RCL/wwwroot/css/blazorbootstrap.demo.rcl.css
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/archive.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/archive.png
new file mode 100644
index 000000000..ca7b99306
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/archive.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/bin.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/bin.png
new file mode 100644
index 000000000..e38668567
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/bin.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/calendar.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/calendar.png
new file mode 100644
index 000000000..5f5a5819b
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/calendar.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/cancel-button.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/cancel-button.png
new file mode 100644
index 000000000..a3a741c8c
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/cancel-button.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/cancelled.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/cancelled.png
new file mode 100644
index 000000000..b81dd8a0e
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/cancelled.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-add.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-add.png
new file mode 100644
index 000000000..1def85d99
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-add.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-copy.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-copy.png
new file mode 100644
index 000000000..b22f62a20
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-copy.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-delete.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-delete.png
new file mode 100644
index 000000000..7d67adcea
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-delete.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-move.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-move.png
new file mode 100644
index 000000000..15ed71f21
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-move.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-rename.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-rename.png
new file mode 100644
index 000000000..93ed77f65
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-rename.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-search.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-search.png
new file mode 100644
index 000000000..185b5d2ac
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-search.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-sync.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-sync.png
new file mode 100644
index 000000000..a32efd6ee
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/folder-sync.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/loading-bar.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/loading-bar.png
new file mode 100644
index 000000000..f69af076f
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/loading-bar.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/new-email.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/new-email.png
new file mode 100644
index 000000000..e24b9519f
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/new-email.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/icons/refresh.png b/BlazorBootstrap.Demo.RCL/wwwroot/icons/refresh.png
new file mode 100644
index 000000000..75444d8f7
Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/icons/refresh.png differ
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/blazorbootstrap.demo.rcl.js b/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/wwwroot/blazorbootstrap.demo.rcl.js
rename to BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js
diff --git a/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html b/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html
index 3425593b7..9362b1802 100644
--- a/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html
+++ b/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-vs.min.css" integrity="sha512-Jn4HzkCnzA7Bc+lbSQHAMeen0EhSTy71o9yJbXZtQx9VvozKVBV/2zfR3VyuDFIxGvHgbOMMNvb80l+jxFBC1Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" asp-append-version="true" />
-    <link href="_content/BlazorBootstrap.Demo.RCL/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
+    <link href="_content/BlazorBootstrap.Demo.RCL/css/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
     <link href="BlazorBootstrap.Demo.WebAssembly.styles.css" rel="stylesheet" />
     <!-- Font Awesome -->
@@ -56,7 +56,7 @@
     <!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
     <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
-    <script src="_content/BlazorBootstrap.Demo.RCL/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
+    <script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script>
diff --git a/blazorbootstrap/BlazorBootstrap.csproj b/blazorbootstrap/BlazorBootstrap.csproj
index 3bed70470..ac69fd146 100644
--- a/blazorbootstrap/BlazorBootstrap.csproj
+++ b/blazorbootstrap/BlazorBootstrap.csproj
@@ -48,4 +48,8 @@
 		<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.26" />
 	</ItemGroup>
 
+	<ItemGroup>
+	  <Folder Include="EventArguments\Ribbon\" />
+	</ItemGroup>
+
 </Project>
diff --git a/blazorbootstrap/Components/Ribbon/Ribbon.razor b/blazorbootstrap/Components/Ribbon/Ribbon.razor
new file mode 100644
index 000000000..ddd4173af
--- /dev/null
+++ b/blazorbootstrap/Components/Ribbon/Ribbon.razor
@@ -0,0 +1,46 @@
+@namespace BlazorBootstrap
+@inherits BlazorBootstrapComponentBase
+
+<CascadingValue Value="this" Name="Ribbon1" IsFixed="true">
+    @ChildContent
+</CascadingValue>
+
+@if (tabs?.Any() ?? false)
+{
+    <div class="@NavParentDivCssClass">
+        <nav>
+            <div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes" role="tablist">
+                @foreach (var t in tabs)
+                {
+                    var tabElementId = t.ElementId;
+                    <button class="nav-link @(t.Disabled ? "disabled" : "")" id="@t.ElementId" data-bs-target="#nav-@t.ElementId" type="button" role="tab" aria-selected="false" @onclick="async () => await OnTabClickAsync(t)">
+                        @if (t.TitleTemplate != null)
+                        {
+                            @t.TitleTemplate
+                        }
+                        else if (!string.IsNullOrWhiteSpace(t.Title))
+                        {
+                            @t.Title
+                        }
+                        else
+                        {
+                            <text>No Title</text>
+                        }
+                    </button>
+                }
+            </div>
+        </nav>
+        <div class="@TabContentCssClass">
+            @foreach (var t in tabs)
+            {
+                <div class="tab-pane @(EnableFadeEffect ? "fade" : "")" id="nav-@t.ElementId" role="tabpanel" aria-labelledby="@t.ElementId">
+                    <div class="d-flex flex-row border">
+                        <CascadingValue Value="this" Name="Ribbon2" IsFixed="true">
+                            @t.Content
+                        </CascadingValue>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>
+}
diff --git a/blazorbootstrap/Components/Ribbon/Ribbon.razor.cs b/blazorbootstrap/Components/Ribbon/Ribbon.razor.cs
new file mode 100644
index 000000000..d19ae418e
--- /dev/null
+++ b/blazorbootstrap/Components/Ribbon/Ribbon.razor.cs
@@ -0,0 +1,341 @@
+namespace BlazorBootstrap;
+
+public partial class Ribbon : BlazorBootstrapComponentBase
+{
+    #region Fields and Constants
+
+    private RibbonTab activeTab = default!;
+
+    private bool isDefaultActiveTabSet = false;
+
+    private DotNetObjectReference<Ribbon> objRef = default!;
+
+    private List<RibbonTab>? tabs = new();
+
+    #endregion
+
+    #region Methods
+
+    protected override void BuildClasses()
+    {
+        this.AddClass(BootstrapClassProvider.Nav);
+        this.AddClass(BootstrapClassProvider.NavTabs, NavStyle == NavStyle.Tabs);
+        this.AddClass(BootstrapClassProvider.NavPills, NavStyle is (NavStyle.Pills or NavStyle.VerticalPills));
+        this.AddClass(BootstrapClassProvider.NavUnderline, NavStyle is (NavStyle.Underline or NavStyle.VerticalUnderline));
+        this.AddClass("flex-column", IsVertical);
+
+        base.BuildClasses();
+    }
+
+    /// <inheritdoc />
+    protected override async ValueTask DisposeAsync(bool disposing)
+    {
+        // TODO: update
+
+        if (disposing) tabs = null;
+
+        await base.DisposeAsync(disposing);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        // Set active tab
+        if (firstRender && !isDefaultActiveTabSet)
+            await SetDefaultActiveTabAsync();
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        objRef ??= DotNetObjectReference.Create(this);
+
+        Attributes ??= new Dictionary<string, object>();
+
+        if (IsVertical)
+            Attributes.Add("aria-orientation", "vertical");
+
+        await base.OnInitializedAsync();
+
+        QueueAfterRenderAction(async () => await JS.InvokeVoidAsync("window.blazorBootstrap.tabs.initialize", ElementId, objRef), new RenderPriority());
+    }
+
+    [JSInvokable]
+    public async Task bsHiddenTab(string activeTabId, string previousActiveTabId)
+    {
+        var activeTabTitle = tabs?.FirstOrDefault(x => x.ElementId == activeTabId)?.Title;
+        var previousActiveTabTitle = tabs?.FirstOrDefault(x => x.ElementId == previousActiveTabId)?.Title;
+
+        var args = new RibbonEventArgs(activeTabTitle!, previousActiveTabTitle!);
+        await OnHidden.InvokeAsync(args);
+    }
+
+    [JSInvokable]
+    public async Task bsHideTab(string activeTabId, string previousActiveTabId)
+    {
+        var activeTabTitle = tabs?.FirstOrDefault(x => x.ElementId == activeTabId)?.Title;
+        var previousActiveTabTitle = tabs?.FirstOrDefault(x => x.ElementId == previousActiveTabId)?.Title;
+
+        var args = new RibbonEventArgs(activeTabTitle!, previousActiveTabTitle!);
+        await OnHiding.InvokeAsync(args);
+    }
+
+    [JSInvokable]
+    public async Task bsShownTab(string activeTabId, string previousActiveTabId)
+    {
+        var activeTabTitle = tabs?.FirstOrDefault(x => x.ElementId == activeTabId)?.Title;
+        var previousActiveTabTitle = tabs?.FirstOrDefault(x => x.ElementId == previousActiveTabId)?.Title;
+
+        var args = new RibbonEventArgs(activeTabTitle!, previousActiveTabTitle!);
+        await OnShown.InvokeAsync(args);
+    }
+
+    [JSInvokable]
+    public async Task bsShowTab(string activeTabId, string previousActiveTabId)
+    {
+        var activeTabTitle = tabs?.FirstOrDefault(x => x.ElementId == activeTabId)?.Title;
+        var previousActiveTabTitle = tabs?.FirstOrDefault(x => x.ElementId == previousActiveTabId)?.Title;
+
+        var args = new RibbonEventArgs(activeTabTitle!, previousActiveTabTitle!);
+        await OnShowing.InvokeAsync(args);
+    }
+    
+    /// <summary>
+    /// Removes the tab by index.
+    /// </summary>
+    /// <param name="tabIndex"></param>
+    /// <exception cref="IndexOutOfRangeException"></exception>
+    public void RemoveTabByIndex(int tabIndex)
+    {
+        if (!tabs?.Any() ?? true) return;
+
+        if (tabIndex < 0 || tabIndex >= tabs!.Count) throw new IndexOutOfRangeException();
+
+        var tab = tabs[tabIndex];
+
+        if (tab is null) return;
+
+        tabs!.Remove(tab);
+
+        QueueAfterRenderAction(async () => { await ShowNextAvailableTabAsync(tabIndex); }, new RenderPriority());
+    }
+
+    /// <summary>
+    /// Removes the tab by name.
+    /// </summary>
+    /// <param name="tabName"></param>
+    public void RemoveTabByName(string tabName)
+    {
+        if (!tabs?.Any() ?? true) return;
+
+        var tabIndex = tabs!.FindIndex(x => x.Name == tabName);
+
+        if (tabIndex == -1) return;
+
+        var tab = tabs[tabIndex];
+
+        tabs!.Remove(tab);
+
+        QueueAfterRenderAction(async () => { await ShowNextAvailableTabAsync(tabIndex); }, new RenderPriority());
+    }
+
+    /// <summary>
+    /// Selects the first tab and show its associated pane.
+    /// </summary>
+    public async Task ShowFirstTabAsync()
+    {
+        if (!tabs?.Any() ?? true) return;
+
+        var tab = tabs!.FirstOrDefault(x => !x.Disabled);
+
+        if (tab is { Disabled: false })
+            await ShowTabAsync(tab);
+    }
+
+    /// <summary>
+    /// Selects the last tab and show its associated pane.
+    /// </summary>
+    public async Task ShowLastTabAsync()
+    {
+        if (!tabs?.Any() ?? true) return;
+
+        var tab = tabs!.LastOrDefault(x => !x.Disabled);
+
+        if (tab is { Disabled: false })
+            await ShowTabAsync(tab);
+    }
+
+    /// <summary>
+    /// Shows the recently added tab.
+    /// </summary>
+    public void ShowRecentTab()
+    {
+        QueueAfterRenderAction(async () => { await ShowLastTabAsync(); }, new RenderPriority());
+    }
+
+    /// <summary>
+    /// Selects the tab by index and show its associated pane.
+    /// </summary>
+    /// <param name="tabIndex">The zero-based index of the element to get or set.</param>
+    public async Task ShowTabByIndexAsync(int tabIndex)
+    {
+        if (!tabs?.Any() ?? true) return;
+
+        if (tabIndex < 0 || tabIndex >= tabs!.Count) throw new IndexOutOfRangeException();
+
+        var tab = tabs[tabIndex];
+
+        if (tab is { Disabled: false })
+            await ShowTabAsync(tab);
+    }
+
+    /// <summary>
+    /// Selects the tab by name and show its associated pane.
+    /// </summary>
+    /// <param name="tabName">The name of the tab to select.</param>
+    public async Task ShowTabByNameAsync(string tabName)
+    {
+        if (!tabs?.Any() ?? true) return;
+
+        var tab = tabs!.LastOrDefault(x => x.Name == tabName && !x.Disabled);
+
+        if (tab is not null)
+            await ShowTabAsync(tab);
+    }
+
+    internal void AddTab(RibbonTab tab)
+    {
+        tabs!.Add(tab);
+
+        if (tab is { IsActive: true, Disabled: false })
+            activeTab = tab;
+
+        StateHasChanged(); // This is mandatory to reflect changes in UI
+    }
+
+    internal async Task OnRibbonItemClick(RibbonItemEventArgs args)
+    {
+        if (OnClick.HasDelegate)
+            await OnClick.InvokeAsync(args);
+    }
+
+    /// <summary>
+    /// Sets the default active tab.
+    /// </summary>
+    internal async Task SetDefaultActiveTabAsync()
+    {
+        if (!tabs?.Any() ?? true) return;
+
+        activeTab ??= tabs!.FirstOrDefault(x => !x.Disabled)!;
+
+        if (activeTab is not null)
+            await ShowTabAsync(activeTab);
+    }
+
+    private async Task OnTabClickAsync(RibbonTab tab) => await ShowTabAsync(tab);
+
+    private async Task ShowNextAvailableTabAsync(int removedTabIndex)
+    {
+        if (!tabs?.Any() ?? true) return;
+
+        if (removedTabIndex < 0 || removedTabIndex > tabs!.Count) throw new IndexOutOfRangeException();
+
+        var tabIndex = 0;
+
+        if (removedTabIndex == tabs!.Count)
+            tabIndex = tabs!.Count - 1;
+        else if (removedTabIndex < tabs!.Count)
+            tabIndex = removedTabIndex;
+
+        var tab = tabs[tabIndex];
+
+        if (tab is { Disabled: false })
+            await ShowTabAsync(tab);
+    }
+
+    private async Task ShowTabAsync(RibbonTab tab)
+    {
+        if (!isDefaultActiveTabSet)
+            isDefaultActiveTabSet = true;
+
+        await JS.InvokeVoidAsync("window.blazorBootstrap.tabs.show", tab.ElementId);
+
+        if (tab?.OnClick.HasDelegate ?? false)
+            await tab.OnClick.InvokeAsync(new TabEventArgs(tab!.Name, tab.Title));
+    }
+
+    #endregion
+
+    #region Properties, Indexers
+
+    /// <inheritdoc />
+    protected override bool ShouldAutoGenerateId => true;
+
+    /// <summary>
+    /// Specifies the content to be rendered inside this.
+    /// </summary>
+    [Parameter]
+    public RenderFragment ChildContent { get; set; } = default!;
+
+    /// <summary>
+    /// Gets or sets the tabs fade effect.
+    /// </summary>
+    [Parameter]
+    public bool EnableFadeEffect { get; set; }
+
+    /// <summary>
+    /// Determines whether the Ribbon is rendered vertically.
+    /// </summary>
+    private bool IsVertical =>
+        NavStyle == NavStyle.Vertical
+        || NavStyle == NavStyle.VerticalPills
+        || NavStyle == NavStyle.VerticalUnderline;
+
+    /// <summary>
+    /// CSS class applied to the parent div of the tab content when vertical.
+    /// </summary>
+    private string? NavParentDivCssClass => IsVertical ? "d-flex" : default;
+
+    /// <summary>
+    /// Get or sets the nav style.
+    /// </summary>
+    //[Parameter]
+    private NavStyle NavStyle { get; set; } = NavStyle.Underline;
+
+    /// <summary>
+    /// This event fires when the user clicks the corresponding <see cref="RibbonItem" />.
+    /// </summary>
+    [Parameter]
+    public EventCallback<RibbonItemEventArgs> OnClick { get; set; }
+
+    /// <summary>
+    /// This event fires after a new tab is shown (and thus the previous active tab is hidden).
+    /// </summary>
+    [Parameter]
+    public EventCallback<RibbonEventArgs> OnHidden { get; set; }
+
+    /// <summary>
+    /// This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden).
+    /// </summary>
+    [Parameter]
+    public EventCallback<RibbonEventArgs> OnHiding { get; set; }
+
+    /// <summary>
+    /// This event fires on tab show, but before the new tab has been shown.
+    /// </summary>
+    [Parameter]
+    public EventCallback<RibbonEventArgs> OnShowing { get; set; }
+
+    /// <summary>
+    /// This event fires on tab show after a tab has been shown.
+    /// </summary>
+    [Parameter]
+    public EventCallback<RibbonEventArgs> OnShown { get; set; }
+
+    /// <summary>
+    /// CSS class applied to the tab content container.
+    /// </summary>
+    private string? TabContentCssClass => IsVertical ? "tab-content flex-grow-1" : "tab-content";
+
+    #endregion
+}
diff --git a/blazorbootstrap/Components/Ribbon/RibbonGroup.razor b/blazorbootstrap/Components/Ribbon/RibbonGroup.razor
new file mode 100644
index 000000000..351698384
--- /dev/null
+++ b/blazorbootstrap/Components/Ribbon/RibbonGroup.razor
@@ -0,0 +1,6 @@
+@namespace BlazorBootstrap
+@inherits BlazorBootstrapComponentBase
+
+<div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+    @ChildContent
+</div>
diff --git a/blazorbootstrap/Components/Ribbon/RibbonGroup.razor.cs b/blazorbootstrap/Components/Ribbon/RibbonGroup.razor.cs
new file mode 100644
index 000000000..d2ce6cd71
--- /dev/null
+++ b/blazorbootstrap/Components/Ribbon/RibbonGroup.razor.cs
@@ -0,0 +1,42 @@
+namespace BlazorBootstrap;
+
+public partial class RibbonGroup : BlazorBootstrapComponentBase
+{
+    #region Methods
+
+    protected override void BuildClasses()
+    {
+        this.AddClass("bb-ribbon-group");
+        this.AddClass(BootstrapClassProvider.Flex);
+        this.AddClass(BootstrapClassProvider.FlexRow);
+        this.AddClass(BootstrapClassProvider.Border);
+
+        base.BuildClasses();
+    }
+
+    /// <inheritdoc />
+    protected override async ValueTask DisposeAsync(bool disposing)
+    {
+        if (disposing)
+        {
+            // TODO: update
+        }
+
+        await base.DisposeAsync(disposing);
+    }
+
+    #endregion
+
+    #region Properties, Indexers
+
+    /// <inheritdoc />
+    protected override bool ShouldAutoGenerateId => true;
+
+    /// <summary>
+    /// Gets or sets the content to be rendered inside this component.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    #endregion
+}
diff --git a/blazorbootstrap/Components/Ribbon/RibbonGroup.razor.css b/blazorbootstrap/Components/Ribbon/RibbonGroup.razor.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/blazorbootstrap/Components/Ribbon/RibbonItem.razor b/blazorbootstrap/Components/Ribbon/RibbonItem.razor
new file mode 100644
index 000000000..6b15874fb
--- /dev/null
+++ b/blazorbootstrap/Components/Ribbon/RibbonItem.razor
@@ -0,0 +1,37 @@
+@namespace BlazorBootstrap
+@inherits BlazorBootstrapComponentBase
+
+<div @ref="@ElementRef"
+     id="@ElementId"
+     class="@ClassNames"
+     style="@StyleNames"
+     @attributes="@Attributes"
+     @onclick="OnRibbonItemClickAsync">
+
+    <div>
+        @if (!string.IsNullOrEmpty(ImgSrc))
+        {
+            <img class="my-2"
+                 src="@ImgSrc"
+                 width="@($"{ImgWidth.ToString(CultureInfo.InvariantCulture)}")px"
+                 height="@($"{ImgWidth.ToString(CultureInfo.InvariantCulture)}")px" />
+        }
+        else
+        {
+            <Icon Class="@IconCssClass"
+                  Color="@IconColor"
+                  Name="@IconName"
+                  CustomIconName="@CustomIconName"
+                  Size="@IconSize" />
+        }
+    </div>
+    @if (!string.IsNullOrEmpty(Text))
+    {
+        <div class="text-center">@Text</div>
+    }
+    else
+    {
+        <div class="text-center">@ChildContent</div>
+    }
+
+</div>
diff --git a/blazorbootstrap/Components/Ribbon/RibbonItem.razor.cs b/blazorbootstrap/Components/Ribbon/RibbonItem.razor.cs
new file mode 100644
index 000000000..e54d527f9
--- /dev/null
+++ b/blazorbootstrap/Components/Ribbon/RibbonItem.razor.cs
@@ -0,0 +1,123 @@
+namespace BlazorBootstrap;
+
+public partial class RibbonItem : BlazorBootstrapComponentBase
+{
+    #region Methods
+
+    protected override void BuildClasses()
+    {
+        this.AddClass("bb-ribbon-item");
+        this.AddClass(BootstrapClassProvider.Flex);
+        this.AddClass(BootstrapClassProvider.FlexColumn);
+        this.AddClass(BootstrapClassProvider.AlignItemsCenter);
+        this.AddClass("ms-1", IsFirstItem);
+        this.AddClass("me-1", IsLastItem);
+        this.AddClass("mx-1", !IsFirstItem && !IsLastItem);
+        this.AddClass("p-1");
+
+        base.BuildClasses();
+    }
+
+    /// <inheritdoc />
+    protected override async ValueTask DisposeAsync(bool disposing)
+    {
+        if (disposing)
+        {
+            // TOOD: update
+        }
+
+        await base.DisposeAsync(disposing);
+    }
+
+    /// <summary>
+    /// Triggers the OnRibbonItemClick event of the parent Ribbon component.
+    /// </summary>
+    private async Task OnRibbonItemClickAsync()
+    {
+        if (Parent is not null)
+            await Parent.OnRibbonItemClick(new RibbonItemEventArgs(Name!));
+    }
+
+    #endregion
+
+    #region Properties, Indexers
+
+    /// <inheritdoc />
+    protected override bool ShouldAutoGenerateId => true;
+
+    /// <summary>
+    /// Specifies the content to be rendered inside the RibbonItem.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// The name of a custom icon to be displayed.
+    /// </summary>
+    [Parameter] public string? CustomIconName { get; set; }
+
+    /// <summary>
+    /// The color of the icon.
+    /// </summary>
+    [Parameter] public IconColor IconColor { get; set; }
+
+    /// <summary>
+    /// CSS class(es) to be applied to the icon element.
+    /// </summary>
+    [Parameter] public string? IconCssClass { get; set; }
+
+    /// <summary>
+    /// The built-in icon to be displayed.
+    /// </summary>
+    [Parameter] public IconName IconName { get; set; }
+
+    /// <summary>
+    /// The size of the icon. Defaults to x3 (extra large).
+    /// </summary>
+    [Parameter] public IconSize IconSize { get; set; } = IconSize.x3;
+
+    /// <summary>
+    /// The height of the image in pixels.
+    /// </summary>
+    [Parameter]
+    public double ImgHeight { get; set; } = 28;
+
+    /// <summary>
+    /// The source URL of the image.
+    /// </summary>
+    [Parameter] public string? ImgSrc { get; set; }
+
+    /// <summary>
+    /// The width of the image in pixels.
+    /// </summary>
+    [Parameter]
+    public double ImgWidth { get; set; } = 28;
+
+    /// <summary>
+    /// True if this is the first item in the RibbonItemGroup.
+    /// </summary>
+    [Parameter] public bool IsFirstItem { get; set; } = false;
+
+    /// <summary>
+    /// True if this is the last item in the RibbonItemGroup.
+    /// </summary>
+    [Parameter] public bool IsLastItem { get; set; } = false;
+
+    /// <summary>
+    /// The name associated with the RibbonItem.
+    /// </summary>
+    [Parameter] public string? Name { get; set; }
+
+    /// <summary>
+    /// Gets or sets the parent.
+    /// </summary>
+    [CascadingParameter(Name = "Ribbon2")]
+    internal Ribbon Parent { get; set; } = default!;
+
+    /// <summary>
+    /// The text content to be displayed inside the RibbonItem.
+    /// </summary>
+    [Parameter] public string? Text { get; set; }
+
+    #endregion
+}
diff --git a/blazorbootstrap/Components/Ribbon/RibbonItem.razor.css b/blazorbootstrap/Components/Ribbon/RibbonItem.razor.css
new file mode 100644
index 000000000..e088fbcd7
--- /dev/null
+++ b/blazorbootstrap/Components/Ribbon/RibbonItem.razor.css
@@ -0,0 +1,11 @@
+.bb-ribbon-item {
+    cursor: pointer;
+    /*width: 64px;*/
+}
+
+    .bb-ribbon-item:hover {
+        background-color: rgba(var(--bs-secondary-rgb), 0.10) !important;
+    }
+
+    .bb-ribbon-item.active {
+    }
diff --git a/blazorbootstrap/Components/Ribbon/RibbonItemGroup.razor b/blazorbootstrap/Components/Ribbon/RibbonItemGroup.razor
new file mode 100644
index 000000000..14a5b1f11
--- /dev/null
+++ b/blazorbootstrap/Components/Ribbon/RibbonItemGroup.razor
@@ -0,0 +1,11 @@
+@namespace BlazorBootstrap
+@inherits BlazorBootstrapComponentBase
+
+<div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+    <div class="flex-grow-1">
+        <div class="d-flex flex-row">
+            @ChildContent
+        </div>
+    </div>
+    <div class="mb-1">@Text</div>
+</div>
diff --git a/blazorbootstrap/Components/Ribbon/RibbonItemGroup.razor.cs b/blazorbootstrap/Components/Ribbon/RibbonItemGroup.razor.cs
new file mode 100644
index 000000000..0cfe8d84d
--- /dev/null
+++ b/blazorbootstrap/Components/Ribbon/RibbonItemGroup.razor.cs
@@ -0,0 +1,49 @@
+namespace BlazorBootstrap;
+
+public partial class RibbonItemGroup : BlazorBootstrapComponentBase
+{
+    #region Methods
+
+    protected override void BuildClasses()
+    {
+        this.AddClass("bb-ribbon-item-group");
+        this.AddClass(BootstrapClassProvider.Flex);
+        this.AddClass(BootstrapClassProvider.FlexColumn);
+        this.AddClass(BootstrapClassProvider.AlignItemsCenter);
+        this.AddClass("my-1");
+        this.AddClass(BootstrapClassProvider.BorderEnd);
+
+        base.BuildClasses();
+    }
+
+    /// <inheritdoc />
+    protected override async ValueTask DisposeAsync(bool disposing)
+    {
+        if (disposing)
+        {
+            // TODO: update
+        }
+
+        await base.DisposeAsync(disposing);
+    }
+
+    #endregion
+
+    #region Properties, Indexers
+
+    /// <inheritdoc />
+    protected override bool ShouldAutoGenerateId => true;
+
+    /// <summary>
+    /// Gets or sets the content to be rendered within the component.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Gets or sets the text content of the component.
+    /// </summary>
+    [Parameter] public string? Text { get; set; }
+
+    #endregion
+}
diff --git a/blazorbootstrap/Components/Ribbon/RibbonItemGroup.razor.css b/blazorbootstrap/Components/Ribbon/RibbonItemGroup.razor.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/blazorbootstrap/Components/Ribbon/RibbonTab.razor b/blazorbootstrap/Components/Ribbon/RibbonTab.razor
new file mode 100644
index 000000000..c067a40f4
--- /dev/null
+++ b/blazorbootstrap/Components/Ribbon/RibbonTab.razor
@@ -0,0 +1,2 @@
+@namespace BlazorBootstrap
+@inherits BlazorBootstrapComponentBase
diff --git a/blazorbootstrap/Components/Ribbon/RibbonTab.razor.cs b/blazorbootstrap/Components/Ribbon/RibbonTab.razor.cs
new file mode 100644
index 000000000..f6bfa9bba
--- /dev/null
+++ b/blazorbootstrap/Components/Ribbon/RibbonTab.razor.cs
@@ -0,0 +1,88 @@
+namespace BlazorBootstrap;
+
+public partial class RibbonTab : BlazorBootstrapComponentBase
+{
+    #region Methods
+
+    /// <inheritdoc />
+    protected override async ValueTask DisposeAsync(bool disposing)
+    {
+        if (disposing && Rendered)
+        {
+            try
+            {
+                await JS.InvokeVoidAsync("window.blazorBootstrap.tabs.dispose", ElementId);
+            }
+            catch (JSDisconnectedException)
+            {
+                // do nothing
+            }
+        }
+
+        await base.DisposeAsync(disposing);
+    }
+
+    protected override void OnInitialized()
+    {
+        ElementId = IdGenerator.GetNextId(); // This is required
+        Parent.AddTab(this);
+    }
+
+    #endregion
+
+    #region Properties, Indexers
+
+    /// <inheritdoc />
+    protected override bool ShouldAutoGenerateId => true;
+
+    /// <summary>
+    /// Specifies the content to be rendered inside the tab.
+    /// </summary>
+    [Parameter]
+    [EditorRequired]
+    public RenderFragment Content { get; set; } = default!;
+
+    /// <summary>
+    /// Gets or sets the disabled state.
+    /// </summary>
+    [Parameter]
+    public bool Disabled { get; set; }
+
+    /// <summary>
+    /// Gets or sets the active tab.
+    /// </summary>
+    [Parameter]
+    public bool IsActive { get; set; }
+
+    /// <summary>
+    /// Gets or sets the tab name.
+    /// </summary>
+    [Parameter]
+    public string Name { get; set; } = default!;
+
+    /// <summary>
+    /// This event fires when the user clicks the corresponding tab button and the tab is displayed.
+    /// </summary>
+    [Parameter]
+    public EventCallback<TabEventArgs> OnClick { get; set; }
+
+    /// <summary>
+    /// Gets or sets the parent ribbon.
+    /// </summary>
+    [CascadingParameter(Name = "Ribbon1")]
+    internal Ribbon Parent { get; set; } = default!;
+
+    /// <summary>
+    /// Gets or sets the tab title.
+    /// </summary>
+    [Parameter]
+    public string Title { get; set; } = default!;
+
+    /// <summary>
+    /// Gets or sets the tab title template.
+    /// </summary>
+    [Parameter]
+    public RenderFragment TitleTemplate { get; set; } = default!;
+
+    #endregion
+}
diff --git a/blazorbootstrap/Enums/FlexDirection.cs b/blazorbootstrap/Enums/FlexDirection.cs
new file mode 100644
index 000000000..3de75ded3
--- /dev/null
+++ b/blazorbootstrap/Enums/FlexDirection.cs
@@ -0,0 +1,9 @@
+namespace BlazorBootstrap;
+
+public enum FlexDirection
+{
+    Column,
+    ColumnReverse,
+    Row,
+    RowReverse
+}
diff --git a/blazorbootstrap/EventArguments/Ribbon/RibbonEventArgs.cs b/blazorbootstrap/EventArguments/Ribbon/RibbonEventArgs.cs
new file mode 100644
index 000000000..76462b979
--- /dev/null
+++ b/blazorbootstrap/EventArguments/Ribbon/RibbonEventArgs.cs
@@ -0,0 +1,21 @@
+namespace BlazorBootstrap;
+
+public class RibbonEventArgs : EventArgs
+{
+    #region Constructors
+
+    public RibbonEventArgs(string activeTabTitle, string previousActiveTabTitle)
+    {
+        ActiveTabTitle = activeTabTitle;
+        PreviousActiveTabTitle = previousActiveTabTitle;
+    }
+
+    #endregion
+
+    #region Properties, Indexers
+
+    public string ActiveTabTitle { get; }
+    public string PreviousActiveTabTitle { get; }
+
+    #endregion
+}
diff --git a/blazorbootstrap/EventArguments/Ribbon/RibbonItemEventArgs.cs b/blazorbootstrap/EventArguments/Ribbon/RibbonItemEventArgs.cs
new file mode 100644
index 000000000..af95ff513
--- /dev/null
+++ b/blazorbootstrap/EventArguments/Ribbon/RibbonItemEventArgs.cs
@@ -0,0 +1,22 @@
+namespace BlazorBootstrap;
+
+public class RibbonItemEventArgs : EventArgs
+{
+    #region Constructors
+
+    public RibbonItemEventArgs(string name)
+    {
+        Name = name;
+    }
+
+    #endregion
+
+    #region Properties, Indexers
+
+    /// <summary>
+    /// Gets the <see cref="RibbonItem" /> name.
+    /// </summary>
+    public string? Name { get; }
+
+    #endregion
+}
diff --git a/blazorbootstrap/EventArguments/Ribbon/RibbonTabEventArgs.cs b/blazorbootstrap/EventArguments/Ribbon/RibbonTabEventArgs.cs
new file mode 100644
index 000000000..47bc349c3
--- /dev/null
+++ b/blazorbootstrap/EventArguments/Ribbon/RibbonTabEventArgs.cs
@@ -0,0 +1,28 @@
+namespace BlazorBootstrap;
+
+public class RibbonTabEventArgs
+{
+    #region Constructors
+
+    public RibbonTabEventArgs(string name, string title)
+    {
+        Name = name;
+        Title = title;
+    }
+
+    #endregion
+
+    #region Properties, Indexers
+
+    /// <summary>
+    /// Gets the <see cref="RibbonTab" /> name.
+    /// </summary>
+    public string Name { get; }
+
+    /// <summary>
+    /// Gets the <see cref="RibbonTab" /> title.
+    /// </summary>
+    public string Title { get; }
+
+    #endregion
+}
diff --git a/blazorbootstrap/EventArguments/TabEventArgs.cs b/blazorbootstrap/EventArguments/Tabs/TabEventArgs.cs
similarity index 100%
rename from blazorbootstrap/EventArguments/TabEventArgs.cs
rename to blazorbootstrap/EventArguments/Tabs/TabEventArgs.cs
diff --git a/blazorbootstrap/EventArguments/TabsEventArgs.cs b/blazorbootstrap/EventArguments/Tabs/TabsEventArgs.cs
similarity index 100%
rename from blazorbootstrap/EventArguments/TabsEventArgs.cs
rename to blazorbootstrap/EventArguments/Tabs/TabsEventArgs.cs
diff --git a/blazorbootstrap/Utilities/BootstrapClassProvider.cs b/blazorbootstrap/Utilities/BootstrapClassProvider.cs
index a63f4eb8e..78bd3624d 100644
--- a/blazorbootstrap/Utilities/BootstrapClassProvider.cs
+++ b/blazorbootstrap/Utilities/BootstrapClassProvider.cs
@@ -10,6 +10,12 @@ public static class BootstrapClassProvider
 
     public static string Active { get; } = "active";
 
+    public static string AlignItemsBaseline { get; } = "align-items-baseline";
+    public static string AlignItemsCenter { get; } = "align-items-center";
+    public static string AlignItemsEnd { get; } = "align-items-end";
+    public static string AlignItemsStart { get; } = "align-items-start";
+    public static string AlignItemsStretch { get; } = "align-items-stretch";
+
     public static string Alert { get; } = "alert";
     public static string AlertColor(AlertColor color) => $"{Alert}-{ToAlertColor(color)}";
     public static string AlertDismisable { get; } = "alert-dismissible";
@@ -19,6 +25,10 @@ public static class BootstrapClassProvider
     public static string Badge { get; } = "badge";
     public static string BadgeColor(BadgeColor color) => $"text-bg-{ToBadgeColor(color)}";
 
+    public static string Border { get; } = "border";
+    public static string BorderEnd { get; } = "border-end";
+    public static string BorderStart { get; } = "border-start";
+
     public static string Button { get; } = "btn";
     public static string ButtonActive { get; } = "active";
     public static string ButtonBlock { get; } = $"{Button}-block";
@@ -65,6 +75,11 @@ public static class BootstrapClassProvider
 
     public static string FlexAlignment(Alignment alignment) => $"justify-content-{ToAlignment(alignment)}";
 
+    public static string Flex { get; } = "d-flex";
+    public static string FlexColumn { get; } = "flex-column";
+    public static string FlexInline { get; } = "d-inline-flex";
+    public static string FlexRow { get; } = "flex-row";
+
     public static string FormControl { get; } = "form-control";
 
     public static string FormRange { get; } = "form-range";
diff --git a/docs/docs/05-components/ribbon.mdx b/docs/docs/05-components/ribbon.mdx
new file mode 100644
index 000000000..69dfa7012
--- /dev/null
+++ b/docs/docs/05-components/ribbon.mdx
@@ -0,0 +1,244 @@
+---
+title: Blazor Ribbon Component
+description: Documentation and examples for using the Blazor Bootstrap Ribbon component.
+image: https://i.imgur.com/LpZVLbF.png
+
+sidebar_label: Ribbon
+sidebar_position: 20
+---
+
+import CarbonAd from '/carbon-ad.mdx'
+
+# Blazor Progress
+
+Documentation and examples for using the Blazor Bootstrap Ribbon component.
+
+<CarbonAd />
+
+<img src="https://i.imgur.com/LpZVLbF.png" alt="Blazor Ribbon" />
+
+## Ribbon Parameters
+
+| Name | Type | Default | Required | Description | Added Version |
+|:--|:--|:--|:--|:--|:--|
+| ChildContent | `RenderFragment` | null | ✔️ | Specifies the content to be rendered inside this. | 2.2.0 |
+| EnableFadeEffect | bool | false | | Gets or sets the tabs fade effect. | 2.2.0 |
+
+## RibbonTab Parameters
+
+| Name | Type | Default | Required | Description | Added Version |
+|:--|:--|:--|:--|:--|:--|
+| Content | `RenderFragment` | null | ✔️ | Specifies the content to be rendered inside the tab. | 2.2.0 |
+| Disabled | bool | false | | Gets or sets the disabled state. | 2.2.0 |
+| IsActive | bool | false | | Gets or sets the active tab. | 2.2.0 |
+| Name | string | null | | Gets or sets the tab name. | 2.2.0 |
+| Title | string | null | | Gets or sets the tab title. | 2.2.0 |
+| TitleTemplate | `RenderFragment` | null | | Gets or sets the tab title template. | 2.2.0 |
+
+## RibbonGroup Parameters
+
+| Name | Type | Default | Required | Description | Added Version |
+|:--|:--|:--|:--|:--|:--|
+| ChildContent | `RenderFragment` | | ✔️ | Specifies the content to be rendered inside this. | 2.2.0 |
+
+## RibbonItemGroup Parameters
+
+| Name | Type | Default | Required | Description | Added Version |
+|:--|:--|:--|:--|:--|:--|
+| ChildContent | `RenderFragment?` | null | ✔️ | Gets or sets the content to be rendered within the component. | 2.2.0 |
+| Title | `string?` | null | | Gets or sets the text content of the component. | 2.2.0 |
+
+## RibbonItem Parameters
+
+| Name | Type | Default | Required | Description | Added Version |
+|:--|:--|:--|:--|:--|:--|
+| ChildContent | `RenderFragment?` | null | ✔️ | Gets or sets the content to be rendered within the component. | 2.2.0 |
+| CustomIconName | `string?` | null | | The name of a custom icon to be displayed. | 2.2.0 |
+| IconColor | `IconColor` | `IconColor.None` | | The color of the icon. | 2.2.0 |
+| IconCssClass | `string?` | null | | CSS class(es) to be applied to the icon element. | 2.2.0 |
+| IconName | `IconName` | `IconName.None` | | The built-in icon to be displayed. | 2.2.0 |
+| IconSize | `IconSize` | `IconSize.x3` | | The size of the icon. Defaults to x3. | 2.2.0 |
+| ImgHeight | double | 28 | | The height of the image in pixels. | 2.2.0 |
+| ImgSrc | `string?` | null | | The source URL of the image. | 2.2.0 |
+| ImgWidth | double | 28 | | The width of the image in pixels. | 2.2.0 |
+| IsFirstItem | bool | false | | True if this is the first item in the RibbonItemGroup. | 2.2.0 |
+| IsLastItem | bool | false | | True if this is the last item in the RibbonItemGroup. | 2.2.0 |
+| Name | `string?` | null | | The name associated with the RibbonItem. | 2.2.0 |
+| Text | `string?` | null | | The text content to be displayed inside the RibbonItem. | 2.2.0 |
+
+## Ribbon Methods
+
+| Name | Description | Added Version |
+|:--|:--|:--|
+| RemoveTabByIndex(int tabIndex) | Removes the tab by index. | 2.2.0 |
+| RemoveTabByName(string tabName) | Removes the tab by name. | 2.2.0 |
+| ShowFirstTabAsync() | Selects the first tab and show its associated pane. | 2.2.0 |
+| ShowLastTabAsync() | Selects the last tab and show its associated pane. | 2.2.0 |
+| ShowRecentTab() | Shows the recently added tab. | 2.2.0 |
+| ShowTabByIndexAsync(int tabIndex) | Selects the tab by index and show its associated pane. | 2.2.0 |
+| ShowTabByNameAsync(string tabName) | Selects the tab by name and show its associated pane. | 2.2.0 |
+
+## Ribbon Events
+
+| Name | Description | Added Version |
+|:--|:--|:--|
+| OnClick | This event fires when the user clicks the corresponding `RibbonItem`. | 2.2.0 |
+| OnHidden | This event fires after a new tab is shown (and thus the previous active tab is hidden). | 2.2.0 |
+| OnHiding | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). | 2.2.0 |
+| OnShowing | This event fires on tab show, but before the new tab has been shown. | 2.2.0 |
+| OnShown | This event fires on tab show after a tab has been shown. | 2.2.0 |
+
+## RibbonTab Callback Events
+
+| Event | Description | Added Version |
+|:--|:--|:--|
+| OnClick | This event fires when the user clicks the corresponding tab button and the tab is displayed. | 2.2.0 |
+
+## Examples
+
+### How it works
+
+In the following example, you will see a ribbon similar to the one found in Outlook.
+
+<img src="https://i.imgur.com/6liyurS.png" alt="Blazor Ribbon - How it works" />
+
+```cshtml showLineNumbers
+<Ribbon OnClick="OnRibbonItemClick">
+    <RibbonTab Title="Home" IsActive="true">
+        <Content>
+            <!-- New -->
+            <RibbonItemGroup Text="New">
+                <RibbonItem Name="NewEmail" IconName="IconName.EnvelopePlus" IconSize="IconSize.x3" IsFirstItem="true">New<br />Email</RibbonItem>
+                <RibbonItem Name="Appointment" IconName="IconName.Calendar3Event" IconSize="IconSize.x3" Text="Appointment" IsLastItem="true" />
+            </RibbonItemGroup>
+            <!-- Delete -->
+            <RibbonItemGroup Text="Delete">
+                <RibbonItem Name="Delete" IconColor="IconColor.Danger" IconName="IconName.Trash" IconSize="IconSize.x3" Text="Delete" IsFirstItem="true" />
+                <RibbonItem Name="Archive" IconColor="IconColor.Primary" IconName="IconName.Archive" IconSize="IconSize.x3" Text="Archive" IsLastItem="true" />
+            </RibbonItemGroup>
+        </Content>
+    </RibbonTab>
+    <RibbonTab Title="Send / Receive">
+        <Content>
+            <!-- Send & Receive -->
+            <RibbonItemGroup Text="Send & Receive">
+                <RibbonItem Name="SendReceiveAllFolders" IconColor="IconColor.Success" IconName="IconName.EnvelopePlus" IconSize="IconSize.x3" IsFirstItem="true">Send/Receive<br />All Folders</RibbonItem>
+                <RibbonItem Name="UpdateFolder" IconColor="IconColor.Primary" IconName="IconName.Calendar3Event" IconSize="IconSize.x3" IsLastItem="true">Update<br />Folder</RibbonItem>
+            </RibbonItemGroup>
+            <!-- Download -->
+            <RibbonItemGroup Text="Download">
+                <RibbonItem Name="ShowProgress" IconColor="IconColor.Success" IconName="IconName.Trash" IconSize="IconSize.x3" IsFirstItem="true">Show<br />Progress</RibbonItem>
+                <RibbonItem Name="CancelAll" IconColor="IconColor.Primary" IconName="IconName.XSquareFill" IconSize="IconSize.x3" IsLastItem="true">Cancel<br />All</RibbonItem>
+            </RibbonItemGroup>
+        </Content>
+    </RibbonTab>
+    <RibbonTab Title="Folder">
+        <Content>
+            <!-- New -->
+            <RibbonItemGroup Text="New">
+                <RibbonItem Name="NewFolder" IconColor="IconColor.Success" IconName="IconName.FolderPlus" IconSize="IconSize.x3" IsFirstItem="true">New<br />Folder</RibbonItem>
+                <RibbonItem Name="NewSearchFolder" IconColor="IconColor.Primary" IconName="IconName.Search" IconSize="IconSize.x3" IsLastItem="true">New<br />Search Folder</RibbonItem>
+            </RibbonItemGroup>
+            <!-- Actions -->
+            <RibbonItemGroup Text="Actions">
+                <RibbonItem Name="RenameFolder" IconColor="IconColor.Success" IconName="IconName.CursorText" IconSize="IconSize.x3" IsFirstItem="true">Rename<br />Folder</RibbonItem>
+                <RibbonItem Name="CopyFolder" IconColor="IconColor.Primary" IconName="IconName.Copy" IconSize="IconSize.x3">Copy<br />Folder</RibbonItem>
+                <RibbonItem Name="MoveFolder" IconColor="IconColor.Primary" IconName="IconName.ArrowRight" IconSize="IconSize.x3">Move<br />Folder</RibbonItem>
+                <RibbonItem Name="DeleteFolder" IconColor="IconColor.Primary" IconName="IconName.FolderX" IconSize="IconSize.x3" IsLastItem="true">Delete<br />Folder</RibbonItem>
+            </RibbonItemGroup>
+        </Content>
+    </RibbonTab>
+</Ribbon>
+
+<div class="mt-2">
+    Selected ribbon item: @selectedRibbonItem
+</div>
+```
+
+```cshtml showLineNumbers
+@code {
+    string? selectedRibbonItem;
+
+    private void OnRibbonItemClick(RibbonItemEventArgs args)
+    {
+        selectedRibbonItem = args.Name;
+    }
+}
+```
+
+[See demo here.](https://demos.blazorbootstrap.com/ribbon#how-it-works)
+
+### Other icons
+
+In the following example, instead of icons like Bootstrap, Font Awesome, etc., we used PNG icons.
+
+<img src="https://i.imgur.com/KmWBVvz.png" alt="Blazor Ribbon - Other icons" />
+
+```cshtml {} showLineNumbers
+<Ribbon OnClick="OnRibbonItemClick">
+    <RibbonTab Title="Home">
+        <Content>
+            <!-- New -->
+            <RibbonItemGroup Text="New">
+                <RibbonItem Name="NewEmail" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/new-email.png" IsFirstItem="true">New<br />Email</RibbonItem>
+                <RibbonItem Name="Appointment" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/calendar.png" Text="Appointment" IsLastItem="true" />
+            </RibbonItemGroup>
+            <!-- Delete -->
+            <RibbonItemGroup Text="Delete">
+                <RibbonItem Name="Delete" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/bin.png" Text="Delete" IsFirstItem="true" />
+                <RibbonItem Name="Archive" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/archive.png" Text="Archive" IsLastItem="true" />
+            </RibbonItemGroup>
+        </Content>
+    </RibbonTab>
+    <RibbonTab Title="Send / Receive" IsActive="true">
+        <Content>
+            <!-- Send & Receive -->
+            <RibbonItemGroup Text="Send & Receive">
+                <RibbonItem Name="SendReceiveAllFolders" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/refresh.png" IsFirstItem="true">Send/Receive<br />All Folders</RibbonItem>
+                <RibbonItem Name="UpdateFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-sync.png" IsLastItem="true">Update<br />Folder</RibbonItem>
+            </RibbonItemGroup>
+            <!-- Download -->
+            <RibbonItemGroup Text="Download">
+                <RibbonItem Name="ShowProgress" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/loading-bar.png" IsFirstItem="true">Show<br />Progress</RibbonItem>
+                <RibbonItem Name="CancelAll" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/cancelled.png" IsLastItem="true">Cancel<br />All</RibbonItem>
+            </RibbonItemGroup>
+        </Content>
+    </RibbonTab>
+    <RibbonTab Title="Folder" IsActive="true">
+        <Content>
+            <!-- New -->
+            <RibbonItemGroup Text="New">
+                <RibbonItem Name="NewFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-add.png" IsFirstItem="true">New<br />Folder</RibbonItem>
+                <RibbonItem Name="NewSearchFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-search.png" IsLastItem="true">New<br />Search Folder</RibbonItem>
+            </RibbonItemGroup>
+            <!-- Actions -->
+            <RibbonItemGroup Text="Actions">
+                <RibbonItem Name="RenameFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-rename.png" IsFirstItem="true">Rename<br />Folder</RibbonItem>
+                <RibbonItem Name="CopyFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-copy.png">Copy<br />Folder</RibbonItem>
+                <RibbonItem Name="MoveFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-move.png">Move<br />Folder</RibbonItem>
+                <RibbonItem Name="DeleteFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-delete.png" IsLastItem="true">Delete<br />Folder</RibbonItem>
+            </RibbonItemGroup>
+        </Content>
+    </RibbonTab>
+</Ribbon>
+
+<div class="mt-2">
+    Selected ribbon item: @selectedRibbonItem
+</div>
+```
+```cshtml {} showLineNumbers
+@code {
+    string? selectedRibbonItem;
+
+    private void OnRibbonItemClick(RibbonItemEventArgs args)
+    {
+        selectedRibbonItem = args.Name;
+    }
+}
+```
+
+[See demo here.](https://demos.blazorbootstrap.com/ribbon#other-icons)
+
+:::note NOTE
+All the PNG icons used on this page are from Flaticon with a premium license only.
+:::
diff --git a/docs/docs/05-components/script-loader.mdx b/docs/docs/05-components/script-loader.mdx
index c9eead520..712db96bd 100644
--- a/docs/docs/05-components/script-loader.mdx
+++ b/docs/docs/05-components/script-loader.mdx
@@ -4,7 +4,7 @@ description: Documentation and examples for using the Blazor Bootstrap Script Lo
 image: https://i.imgur.com/sBiYPeQ.png
 
 sidebar_label: Script Loader
-sidebar_position: 20
+sidebar_position: 21
 ---
 
 import CarbonAd from '/carbon-ad.mdx'
diff --git a/docs/docs/05-components/sidebar.mdx b/docs/docs/05-components/sidebar.mdx
index beda5803e..54647857c 100644
--- a/docs/docs/05-components/sidebar.mdx
+++ b/docs/docs/05-components/sidebar.mdx
@@ -4,7 +4,7 @@ description: Use the Blazor Bootstrap Sidebar component to show consistent cross
 image: https://i.imgur.com/d91Q9Zt.png
 
 sidebar_label: Sidebar
-sidebar_position: 21
+sidebar_position: 22
 ---
 
 import CarbonAd from '/carbon-ad.mdx'
diff --git a/docs/docs/05-components/sidebar2.mdx b/docs/docs/05-components/sidebar2.mdx
index e61339edf..cc02b21f9 100644
--- a/docs/docs/05-components/sidebar2.mdx
+++ b/docs/docs/05-components/sidebar2.mdx
@@ -4,7 +4,7 @@ description: Use the Blazor Bootstrap Sidebar2 component to display consistent,
 image: https://i.imgur.com/vs8kl7G.png
 
 sidebar_label: Sidebar2
-sidebar_position: 22
+sidebar_position: 23
 ---
 
 import CarbonAd from '/carbon-ad.mdx'
diff --git a/docs/docs/05-components/sortable-list.mdx b/docs/docs/05-components/sortable-list.mdx
index ea3a1220f..272f97990 100644
--- a/docs/docs/05-components/sortable-list.mdx
+++ b/docs/docs/05-components/sortable-list.mdx
@@ -4,7 +4,7 @@ description: The Blazor Bootstrap Sortable List component, built on top of Sorta
 image: https://i.imgur.com/bfzP8Yi.png
 
 sidebar_label: Sortable List
-sidebar_position: 23
+sidebar_position: 24
 ---
 
 import CarbonAd from '/carbon-ad.mdx'
diff --git a/docs/docs/05-components/spinners.mdx b/docs/docs/05-components/spinners.mdx
index dfe93ca3f..88969f5df 100644
--- a/docs/docs/05-components/spinners.mdx
+++ b/docs/docs/05-components/spinners.mdx
@@ -4,7 +4,7 @@ description: Visualize the loading state of a component or page using the Blazor
 image: https://i.imgur.com/G4wyEd6.png
 
 sidebar_label: Spinners
-sidebar_position: 24
+sidebar_position: 25
 ---
 
 import CarbonAd from '/carbon-ad.mdx'
diff --git a/docs/docs/05-components/tabs.mdx b/docs/docs/05-components/tabs.mdx
index ba34908fd..91fae4073 100644
--- a/docs/docs/05-components/tabs.mdx
+++ b/docs/docs/05-components/tabs.mdx
@@ -4,7 +4,7 @@ description: Documentation and examples for using Blazor Bootstrap Tabs componen
 image: https://i.imgur.com/KelXx6Z.png
 
 sidebar_label: Tabs
-sidebar_position: 25
+sidebar_position: 26
 ---
 
 import CarbonAd from '/carbon-ad.mdx'
diff --git a/docs/docs/05-components/toasts.mdx b/docs/docs/05-components/toasts.mdx
index 896d1f21e..078aab6c1 100644
--- a/docs/docs/05-components/toasts.mdx
+++ b/docs/docs/05-components/toasts.mdx
@@ -4,7 +4,7 @@ description: Push notifications to your visitors with a toast, a lightweight and
 image: https://i.imgur.com/W1YkmJH.png
 
 sidebar_label: Toasts
-sidebar_position: 26
+sidebar_position: 27
 ---
 
 import CarbonAd from '/carbon-ad.mdx'
diff --git a/docs/docs/05-components/tooltips.mdx b/docs/docs/05-components/tooltips.mdx
index 009e8005b..52a82a6a5 100644
--- a/docs/docs/05-components/tooltips.mdx
+++ b/docs/docs/05-components/tooltips.mdx
@@ -4,7 +4,7 @@ description: Use Blazor Bootstrap tooltip component to add custom tooltips to yo
 image: https://i.imgur.com/uqvqb2i.jpg
 
 sidebar_label: Tooltips
-sidebar_position: 27
+sidebar_position: 28
 ---
 
 import CarbonAd from '/carbon-ad.mdx'
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 753af47db..ac784b8cf 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -48,9 +48,9 @@ const config = {
         ({
             announcementBar: {
                 id: 'support_us',
-                content: '🚨 We strongly recommend all BlazorBootstrap users migrate to version 2.x.x. <a target="_blank" rel="noopener noreferrer" href="/blog/2024/02/25/upgrade-to-v2.0.0">Read more...</a>',
-                backgroundColor: '#f1aeb5',
-                textColor: '#58151c',
+                content: '⭐️ If you like Blazor Bootstrap, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/vikramlearning/blazorbootstrap">GitHub</a>! ⭐️',
+                //backgroundColor: '#fafbfc',
+                //textColor: '#091E42',
                 isCloseable: true,
             },
             navbar: {
diff --git a/docs/package.json b/docs/package.json
index a3ea95552..5b59d8e4b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "blazorbootstrap",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",