Blazorise Sidebar component

The Sidebar component provides an expandable container for navigation and secondary content alongside the main page.

The sidebar extension is composed of several components:

  • <Sidebar> main sidebar component
    • <SidebarContent> container for the sidebar brand and navigation
      • <SidebarBrand> brand logo or link located in the sidebar header
      • <SidebarNavigation> container for the sidebar navigation items
        • <SidebarLabel> simple label to separate navigation items
        • <SidebarItem> navigation item that holds the link or subitems
          • <SidebarLink> simple label to separate navigation items
          • <SidebarSubItem> simple label to separate navigation items

To use the Sidebar component, install the Blazorise.Sidebar package first.

Installation

NuGet

Install extension from NuGet. 
Install-Package Blazorise.Sidebar

Imports

In your main _Imports.razor add: 
@using Blazorise.Sidebar

Static files

Include CSS link into your index.html or _Layout.cshtml / _Host.cshtml file, depending if you're using a Blazor WebAssembly or Blazor Server side project. 
<link href="_content/Blazorise.Sidebar/blazorise.sidebar.css" rel="stylesheet" />

Usage

When defining a sidebar structure, you can choose between manual or dynamic building. You cannot combine them, so choose the approach that suits you best.

Manual

When building your sidebar manually you have full control of its content and navigation items. You can combine sidebar components as you wish. 
<Sidebar @ref="sidebar">
        <SidebarContent>
        <SidebarBrand>
        <a href="#">Blazorise Sidebar</a>
        </SidebarBrand>
        <SidebarNavigation>
        <SidebarLabel>Main</SidebarLabel>
        <SidebarItem>
        <SidebarLink To="#" Title="Home">
        <Icon Name="IconName.Home" Margin="Margin.Is3.FromEnd" />Home
        </SidebarLink>
        </SidebarItem>
        <SidebarItem>
        <SidebarLink Toggled="(isOpen)=> mailSidebarSubItems.Toggle(isOpen)" IsShow>
        <Icon Name="IconName.Mail" Margin="Margin.Is3.FromEnd" />Email
        </SidebarLink>
        <SidebarSubItem @ref="mailSidebarSubItems" IsShow>
        <SidebarItem>
        <SidebarLink To="#email/inbox">Inbox</SidebarLink>
        </SidebarItem>
        <SidebarItem>
        <SidebarLink To="#email/compose">Compose Email</SidebarLink>
        </SidebarItem>
        @* other subitems *@
        </SidebarSubItem>
        </SidebarItem>
        <SidebarItem>
        <SidebarLink Toggled="(isOpen)=> appsSidebarSubItems.Toggle(isOpen)" IsShow>
        <Icon Name="IconName.Smartphone" Margin="Margin.Is3.FromEnd" />Apps
        </SidebarLink>
        <SidebarSubItem @ref="appsSidebarSubItems" IsShow>
        <SidebarItem>
        <SidebarLink To="#apps/todo">Todo List</SidebarLink>
        </SidebarItem>
        </SidebarSubItem>
        </SidebarItem>
        </SidebarNavigation>
        </SidebarContent>
</Sidebar>

@code{
    Sidebar sidebar;
    SidebarSubItem mailSidebarSubItems;
    SidebarSubItem appsSidebarSubItems;

        void ToggleSidebar()
    {
        sidebar.Toggle();
    }
}

Dynamic

You can also build sidebar dynamically by using the Data attribute and the SidebarInfo class. The SidebarInfo is fully serializable so you can save it to an external source or database. 
<Sidebar Data="@sidebarInfo" />

@code{
    SidebarInfo sidebarInfo = new SidebarInfo
    {
        Brand = new SidebarBrandInfo
        {
            Text = "Blazorise Demo"
        },
        Items = new List<SidebarItemInfo>
    {
        new SidebarItemInfo { To = "#", Text = "Dashboard" },
        new SidebarItemInfo
            {
                Text = "Email",
                Icon = IconName.Mail,
                SubItems = new List<SidebarItemInfo>
            {
        new SidebarItemInfo { To = "#email/inbox", Text = "Inbox" },
        new SidebarItemInfo { To = "#email/compose", Text = "Compose Email" },
                }
            },
        new SidebarItemInfo
            {
                Text = "Applications",
                SubItems = new List<SidebarItemInfo>
            {
        new SidebarItemInfo { To = "#apps/todo", Text = "Todo List" }
                }
            },
        }
    };
}
On this page