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

[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....

[gvreddy04]

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....

Thank you for sharing your feedback. Please create a sample GitHub repo to reproduce the issue. I'll take a look. Do not share .zip files.

[s8jt8zw8jf-lang]

My bad.
Set the render to be per page instead of global.
Tried to edit the project to global location, but that failed to resolve the issue.
Started a fresh new project using global location, and good to go now.
Seems for layout page you cannot define a render location, so has got to be global if you need to do any rendering in these files.

now to migrate work done to new project..