Sidebar Navigation Component

Go back

Simple Style — Desktop

With Sections & Expanded Children

Minimal

No search, no featured card, no account section

Collapsible / Slim Style

Icon rail (68px) that expands to show a sub-nav panel (336px). Click a rail icon to toggle.

Closed

Open

Collapsible — Interactive

Click a rail icon to open its sub-nav. Click again to close.

Dual-Tier Style

Full sidebar (296px) with an optional sub-nav panel (552px total when open). Click a main nav item that has sub-items to reveal its sub-nav.

Closed

Open

Dual-Tier — Interactive

Click Dashboard, Reporting, or Users to open/close their sub-nav. Other items close the panel.

Usage examples

Copy-paste-ready snippets for SidebarNavigation.

Basic sidebar

<SidebarNavigation LogoText="Untitled UI"
                   Items="navItems"
                   @bind-ActiveItem="activeItem"
                   AccountName="Olivia Rhye"
                   AccountEmail="olivia@untitledui.com" />

@code {
    private string activeItem = "Dashboard";

    private List<SidebarNavigation.SidebarNavItem> navItems = new()
    {
        new() { Label = "Dashboard", IconMarkup = HomeIcon },
        new() { Label = "Projects",  IconMarkup = FolderIcon, Badge = "10" },
        new() { Label = "Tasks",     IconMarkup = CheckIcon },
        new() { Label = "Reports",   IconMarkup = ChartIcon },
    };
}

With featured card

<SidebarNavigation LogoText="Untitled UI"
                   Items="navItems"
                   ShowFeaturedCard="true"
                   FeaturedCardTitle="Used space"
                   FeaturedCardDescription="Your team has used 80% of your available space."
                   FeaturedCardProgress="80"
                   FeaturedCardActionText="Upgrade plan"
                   OnFeaturedCardAction="HandleUpgrade"
                   OnDismissCard="HandleDismiss" />