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.
Currently, two levels of navigation are supported. For more than two levels, use the Sidebar2 component.

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.

Apply custom CSS class to NavItem#

Set the Class property of a NavItem to apply a custom CSS class.