Blazorise Sidebar component

Keep navigation and secondary content beside the main page.

Use a sidebar to give users access to application areas while keeping the current view available.

Structure

A Sidebar contains branding and navigation inside SidebarContent. Navigation items can link to a destination or contain nested items.

  • <Sidebar>The sidebar container.
    • <SidebarContent>Contains the branding and navigation.
      • <SidebarBrand>The sidebar's brand or home link.
      • <SidebarNavigation>Groups navigation entries.
        • <SidebarLabel>Labels a group of entries.
        • <SidebarItem>Contains a navigation link or nested entries.
          • <SidebarLink>A link to a navigation destination.
          • <SidebarSubItem>A container for nested navigation entries.
            • <SidebarItem>A nested entry using the same item structure.

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

Installation

NuGet

Install extension from NuGet. 
dotnet add package Blazorise.Sidebar

Imports

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

Static files

Add these links inside the <head> section: 
<link href="_content/Blazorise.Sidebar/blazorise.sidebar.css?v=2.4.1.0" rel="stylesheet" />
Update wwwroot/index.html.

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" }
                }
            },
        }
    };
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page