Blazor Sidebar

Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content.

Basic usage#

Two level navigation#

Use NavItem's Id and ParentId to set the parent-child relation.
At this moment, two levels of navigation are supported.

Change icons color#

Set IconColor property to change the color.

Full layout with sidebar#

Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.

Toggle sidebar to show icons only#

Call ToggleSidebar() method to toggle the Sidebar to show the icons only.

Show badge#

A badge is useful when displaying the application version, environment, or other information. Use the BadgeText parameter to show the badge.

Custom brand icon#

Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.
Use the ImageSrc parameter to set the brand logo.

Customize sidebar#

Developers can customize the sidebar color by changing the CSS variables, as mentioned in the below example.