Blazor Ribbon
Documentation and examples for using the Blazor Bootstrap Ribbon component.
How it works#
In the following example, you will see a ribbon similar to the one found in Outlook.
New
Email
Appointment
New
Delete
Archive
Delete
Send/Receive
All Folders
All Folders
Update
Folder
Folder
Send & Receive
Show
Progress
Progress
Cancel
All
All
Download
New
Folder
Folder
New
Search Folder
Search Folder
New
Rename
Folder
Folder
Copy
Folder
Folder
Move
Folder
Folder
Delete
Folder
Folder
Actions
Selected ribbon item:
<Ribbon OnClick="OnRibbonItemClick">
<RibbonTab Title="Home" Active="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;
}
}
Other icons#
In the following example, instead of icons like Bootstrap, Font Awesome, etc., we used PNG icons.
New
Email
Appointment
New
Delete
Archive
Delete
Send/Receive
All Folders
All Folders
Update
Folder
Folder
Send & Receive
Show
Progress
Progress
Cancel
All
All
Download
New
Folder
Folder
New
Search Folder
Search Folder
New
Rename
Folder
Folder
Copy
Folder
Folder
Move
Folder
Folder
Delete
Folder
Folder
Actions
Selected ribbon item:
<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" Active="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" Active="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;
}
}
NOTE: All the PNG icons used on this page are from Flaticon with a premium license only.
Blazor Bootstrap
- Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
- Code licensed Apache License 2.0.
- Currently v3.1.0.