Blazor Bootstrap Layout Setup - Blazor WebAssembly
High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers.
Prerequisites #
Assuming you followed the getting started docs for the initial setup.
- Blazor WebAssembly Project: Follow the getting started steps for the initial setup.
- Blazor Server Project: Follow the getting started steps for the initial setup.
Steps #
1. 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;
}
}