Sidebar not showing items

[CosminCAS123]

Hey! New to blazor bootstrap and blazor in general(Web App interactive auto template ). In client project, I defined a layout that'll use the SideBar component . I simplified it for this issue ( no data provider) :

@inherits LayoutComponentBase


<div class="bb-page">
    <Sidebar Title="For relationships" IconName="IconName.Apple">
                 < NavItem Href="/home" IconName="IconName.House" Text="Home" />
    
    </Sidebar>

    <main class="content">
        @Body
    </main>
</div>

then the Home page (client project) looks like this :

@page "/home"
@rendermode InteractiveAuto
@layout Layouts.SidebarLayout

<h1>HOME PAGE WITH SIDEBAR LAYOUT</h1>

And the result is :

I also tried the layout on my starting auth interactive SSR pages (login and register) from the server, and the same thing happens.

I installed blazor bootstrap accordingly to the web app interactive auto tutorial. If you need any more information ,please tell me. Thanks!

[gvreddy04]

@CosminCAS123 Thank you for trying BlazorBootstrap. Here is the example:

<Sidebar Href="/"
         IconName="IconName.BootstrapFill"
         Title="Blazor Bootstrap"
         DataProvider="SidebarDataProvider" />

@code {
    IEnumerable<NavItem>? navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},
            new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts"},
            new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete"},
            new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb"},
            new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar"},
        };
        return navItems;
    }
}

Link: https://demos.blazorbootstrap.com/sidebar

[Soundman32]

I'm seeing the same thing. Is there any fix for this?

[zabeda]

I ended up shelving the design that needed the sidebar, so stopped working on this. I had started looking at creating a custom component that extended BlazorBootstrapComponentBase for the sidebar. I think it was using the code from Sidebar in the project. I checked and I don't have the code. Sorry can't help more.

[EldritchMuppet]

Your problem is you dont have it in interactiveserver rendering mode so it's not calling the dataprovider

You can set the mode in a bunch of places but the one used in the blazorbootstrap getting started doc is to use in your app component;
<Routes @rendermode=@InteractiveServer />

[jtaylor1098]

Hey, everyone,
I just started working on a project, and I am having the same issue with the collapse class attached to the "bb-sidebar-content" within the sidebar component. I've attempted to use display: inherit; within the class and wrapping in a div. That works for desktop, but it hinders a responsive design (mobile). In "Sidebar2" they use a "Task.Delay(2000);" so I wouldn't be surprised if that's their solution. It works, but also a temporary solution. Considering that there still doesn't seem to be an answer, I think I'll move on to a different UI library, but I'm hoping someone will respond with a solution.

Sidebar2: Notice the "collapse" class on "bb-sidebar2-content". If you use the toggle button under 640px width, it'll show when reverting to desktop.

[s8jt8zw8jf-lang]

Yes, I'm seeing the collapse as well, and the nav-items are not being displayed.
.net 10 project from visual studio (2026) temple for blazor server app.
Using blazor 3.5.0. Tried switching back to 3.4, same.

Followed instructions for installing blazor, server, .net 8.(https://docs.blazorbootstrap.com/getting-started/blazor-webapp-server-global-net-8)

any suggestions welcome please....