Layout Setup - Blazor WebAssembly

Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.

Prerequisites

Assuming you followed the getting started docs for the initial setup.

1. Blazor WebAssembly Project: Follow the getting started steps for the initial setup.
2. Blazor Server Project: Follow the getting started steps for the initial setup.

Steps

Replace MainLayout.razor page code with the below code.

NOTE

Remove all the CSS content from the Shared/MainLayout.razor.css file.

@inherits LayoutComponentBase

<BlazorBootstrapLayout StickyHeader="true">
    <HeaderSection>
        <ThemeSwitcher Class="ps-3 ps-lg-2" />
    </HeaderSection>

    <SidebarSection>
        <Sidebar2 Href="/"
                  ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg"
                  Title="Blazor Bootstrap"
                  BadgeText="3.3.1"
                  DataProvider="Sidebar2DataProvider"
                  WidthUnit="Unit.Px" />
    </SidebarSection>

    <ContentSection>
        @Body
    </ContentSection>

    <FooterSection>
        Footer links...
    </FooterSection>
</BlazorBootstrapLayout>

@code {
    private IEnumerable<NavItem> navItems = default!;

    private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

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

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
                   {
                       new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
                       new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
                       new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},
                   };

        return navItems;
    }
}

Starter templates

.NET 8

TODO

.NET 7

1. Blazor Bootstrap - Blazor WebAssembly App

   

2. Blazor Bootstrap - Blazor Empty WebAssembly App

   

.NET 6

1. Blazor Bootstrap - Blazor WebAssembly App