syncfusion-content · IndrajithSrinivasan · Dec 10, 2024 · Dec 9, 2024 · Dec 9, 2024 · Dec 9, 2024
diff --git a/blazor-toc.html b/blazor-toc.html
@@ -4019,6 +4019,16 @@
 			</li>
 		</ul>
 		</li>
+	<li>Ribbon
+		<ul>
+			<li>Getting Started
+				<ul>
+					<li> <a href="/blazor/ribbon/getting-started-webapp">Blazor Web App</a></li>
+					<li><a href="/blazor/ribbon/getting-started">Blazor Server and WASM App</a></li>
+				</ul>
+			</li>
+		</ul>
+	</li>
 
 	<li>RichTextEditor
 		<ul>

diff --git a/blazor/ribbon/getting-started-webapp.md b/blazor/ribbon/getting-started-webapp.md
@@ -0,0 +1,189 @@
+---
+layout: post
+title: Getting started with Syncfusion Ribbon in Blazor Web App
+description: Check out the documentation for getting started with Syncfusion Blazor Ribbon Components in Blazor Web App.
+platform: Blazor
+control: Ribbon
+documentation: ug
+---
+
+# Getting Started with Blazor Ribbon in Blazor Web App
+
+This section briefly explains about how to include [Blazor Ribbon](https://www.syncfusion.com/blazor-components/blazor-ribbon) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/).
+
+## Prerequisites
+
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+
+## Create a new Blazor Web App
+
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+
+You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+
+## Install Syncfusion Blazor Ribbon and Themes NuGet in the App
+
+To add **Blazor Ribbon** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install `Syncfusion.Blazor.Ribbon` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+
+If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion Blazor components NuGet packages within the client project.
+
+Alternatively, you can utilize the following package manager command to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Ribbon -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+
+## Register Syncfusion Blazor Service
+
+Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Ribbon` namespace.
+
+```cshtml
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Ribbon
+
+```
+
+Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+
+If you select an **Interactive render mode** as `WebAssembly` or `Auto`, you need to register the Syncfusion Blazor service in both **~/Program.cs** files of your Blazor Web App.
+
+```cshtml
+
+....
+using Syncfusion.Blazor;
+....
+builder.Services.AddSyncfusionBlazor();
+....
+
+```
+
+## Add stylesheet and script resources
+
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
+
+```html
+<head>
+    ....
+    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
+</head>
+
+<body>
+    ....
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+</body>
+```
+
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+
+## Add Syncfusion Blazor Ribbon component
+
+Add the Syncfusion Blazor Ribbon component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+
+{% tabs %}
+{% highlight razor %}
+
+@* desired render mode define here *@
+@rendermode InteractiveAuto
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding ribbon tab
+
+In Ribbon component, options are organized into tabs for easy access. You can use the `<RibbonTabs>` directive to group all the tabs and `<RibbonTab>` directive to define each ribbon tab as shown below:
+
+{% tabs %}
+{% highlight razor %}
+
+<SfRibbon>
+    <RibbonTabs>
+        <RibbonTab HeaderText="Home"></RibbonTab>
+    </RibbonTabs>
+</SfRibbon>
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding ribbon group
+
+To define a ribbon group under each tab, you can use the `<RibbonGroups>` directive like below. The `Orientation` property of ribbon group defines whether the collection of items inside the group will be rendered column-wise or row-wise.
+
+{% tabs %}
+{% highlight razor %}
+
+<SfRibbon>
+    <RibbonTabs>
+        <RibbonTab HeaderText="Home">
+            <RibbonGroups>
+                <RibbonGroup HeaderText="Clipboard" Orientation="Orientation.Row"></RibbonGroup>
+            </RibbonGroups>
+        </RibbonTab>
+    </RibbonTabs>
+</SfRibbon>
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding ribbon item
+
+You can use the `<RibbonCollection>` directive to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the `<RibbonItem>` directive with the `Type` property to specify the type of item to be rendered, using the `RibbonItemType` such as Button, a DropDown, a ComboBox, and more.
+
+{% tabs %}
+{% highlight razor %}
+
+<SfRibbon>
+    <RibbonTabs>
+        <RibbonTab HeaderText="Home">
+            <RibbonGroups>
+                <RibbonGroup HeaderText="Clipboard" Orientation="Orientation.Row">
+                    <RibbonCollections>
+                        <RibbonCollection>
+                            <RibbonItems>
+                                <RibbonItem Type=RibbonItemType.SplitButton Disabled=true>
+                                    <RibbonSplitButtonSettings Content="Paste" IconCss="e-icons e-paste" Items="@formatItems"></RibbonSplitButtonSettings>
+                                </RibbonItem>
+                            </RibbonItems>
+                        </RibbonCollection>
+                        <RibbonCollection>
+                            <RibbonItems>
+                                <RibbonItem Type=RibbonItemType.Button>
+                                    <RibbonButtonSettings Content="Cut" IconCss="e-icons e-cut" ></RibbonButtonSettings>
+                                </RibbonItem>
+                                <RibbonItem Type=RibbonItemType.Button>
+                                    <RibbonButtonSettings Content="Copy" IconCss="e-icons e-copy"></RibbonButtonSettings>
+                                </RibbonItem>
+                                <RibbonItem Type=RibbonItemType.Button>
+                                    <RibbonButtonSettings Content="Format Painter" IconCss="e-icons e-format-painter"></RibbonButtonSettings>
+                                </RibbonItem>
+                            </RibbonItems>
+                        </RibbonCollection>
+                    </RibbonCollections>
+                </RibbonGroup>
+            </RibbonGroups>
+        </RibbonTab>
+    </RibbonTabs>
+</SfRibbon>
+
+@code{
+    List<DropDownMenuItem> formatItems = new List<DropDownMenuItem>()
+    {
+        new DropDownMenuItem{ Text = "Keep Source Format" },
+        new DropDownMenuItem{ Text = "Merge Format" },
+        new DropDownMenuItem{ Text = "Keep Text Only" }
+    };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion Blazor Ribbon component in your default web browser.
+
+![Blazor Ribbon Component](./images/getting-started1.png)