Layout

TwSidebar

TwSidebar is a Blazor sidebar for navigation. Build it from SidebarContent markup or data-driven NavigationItems, with IsSearchable and a collapsible layout.

Last updated 24 September 2026

Basic Sidebar

TwSidebar has all the functionality you'd want in a single component for a sidebar. You can customise the sidebar using both tailwind classes and additional TwBlazor Theme styling.

Razor

<TwSidebar IsSidebarOpen="true" Style="background-color: #ffffff;">
    <NavbarContent>
        <div class="items-center gap-1 ml-2">
            <a href="#" class="px-3 py-1.5 rounded-md text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition-colors duration-150">Home</a>
            <a href="#" class="px-3 py-1.5 rounded-md text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition-colors duration-150">About</a>
            <a href="#" class="px-3 py-1.5 rounded-md text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition-colors duration-150">Services</a>
        </div>
    </NavbarContent>
    <HeaderContent>
        <a href="#" class="flex items-center gap-2 px-4 py-3 border-b border-gray-200">
            <img src="_content/TwBlazor.Docs/images/logo.svg" alt="twblazor Logo" class="h-8 w-8 shrink-0" />
            <span class="text-xl font-bold tracking-tight text-gray-900">twblazor</span>
        </a>
    </HeaderContent>
    <SidebarContent>
        <a href="#" class="flex items-center gap-2 mx-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors duration-150">
            <span class="h-1.5 w-1.5 rounded-full bg-gray-400"></span>
            Sidebar Link
        </a>
        <a href="#" class="flex items-center gap-2 mx-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors duration-150">
            <span class="h-1.5 w-1.5 rounded-full bg-gray-400"></span>
            Sidebar Link
        </a>
        <a href="#" class="flex items-center gap-2 mx-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors duration-150">
            <span class="h-1.5 w-1.5 rounded-full bg-gray-400"></span>
            Sidebar Link
        </a>
    </SidebarContent>
    <ChildContent>
        <div class="p-6 max-w-2xl">
            <h2 class="text-lg font-semibold text-gray-900 mb-2">Main Content</h2>
            <p class="text-sm text-gray-600 leading-relaxed">
                Use <code class="px-1.5 py-0.5 rounded bg-gray-100 text-xs font-mono text-gray-800">@@ChildContent</code> with a 
                <code class="px-1.5 py-0.5 rounded bg-gray-100 text-xs font-mono text-gray-800">RenderFragment</code> on a layout page to share a sidebar between pages.
            </p>
        </div>
    </ChildContent>
</TwSidebar>

Instead of hand-writing SidebarContent markup, pass a List<NavigationItem> to NavigationItems and TwSidebar renders the links, nested groups, and (with IsSearchable) a search box for you - this is exactly how this documentation site's own sidebar is built, see Navigation.razor.cs.

Razor

<TwSidebar IsSidebarOpen="true" NavigationItems="_navigationItems" IsSearchable Style="background-color: #ffffff;">
    <HeaderContent>
        <a href="#" class="flex items-center gap-2 px-4 py-3 border-b border-gray-200">
            <img src="_content/TwBlazor.Docs/images/logo.svg" alt="twblazor Logo" class="h-8 w-8 shrink-0" />
            <span class="text-xl font-bold tracking-tight text-gray-900">twblazor</span>
        </a>
    </HeaderContent>
    <ChildContent>
        <div class="p-6 max-w-2xl">
            <h2 class="text-lg font-semibold text-gray-900 mb-2">Data-Driven Navigation</h2>
            <p class="text-sm text-gray-600 leading-relaxed">
                This sidebar is generated entirely from a <code class="px-1.5 py-0.5 rounded bg-gray-100 text-xs font-mono text-gray-800">List&lt;NavigationItem&gt;</code>
                passed to <code class="px-1.5 py-0.5 rounded bg-gray-100 text-xs font-mono text-gray-800">NavigationItems</code> - no hand-written markup for links or groups. Try the search box above.
            </p>
        </div>
    </ChildContent>
</TwSidebar>

CSHARP

@code {
    private readonly List<NavigationItem> _navigationItems =
    [
        new() { Id = "dashboard", Label = "Dashboard", Href = "/dashboard" },
        new()
        {
            Id = "content",
            Label = "Content",
            NavigationItems =
            [
                new() { Id = "posts", Label = "Posts", Href = "/posts" },
                new() { Id = "pages", Label = "Pages", Href = "/pages" },
                new() { Id = "media", Label = "Media", Href = "/media" },
            ]
        },
        new()
        {
            Id = "settings",
            Label = "Settings",
            NavigationItems =
            [
                new() { Id = "profile", Label = "Profile", Href = "/profile" },
                new() { Id = "security", Label = "Security", Href = "/security" },
            ]
        },
    ];
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwSidebarTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`SkipLink`	string
`MobileOverlay`	string
`MobileClosed`	string
`MobileOpen`	string
`NavigationList`	string
`NavbarFixedInset`	string
`NavbarNavigationResponsive`	string
`NavbarNavigationExpanded`	string
`Navbar`	string
`NavbarContent`	string
`NavbarBrand`	string
`NavbarNavigation`	string
`NavbarActions`	string
`NavbarToggle`	string
`NavbarToggleIcon`	string
`NavbarLink`	string
`NavbarLinkActive`	string
`NavbarMobileMenu`	string
`Sidebar`	string
`MainContent`	string
`MainContentRoot`	string
`NavigationItemBase`	string
`NavigationItemActive`	string
`NavigationDropdownContainer`	string
`NavigationItemActiveLevelDeep`	string
`NavigationDropdownContainerDeep`	string
`NavigationGroupRailDeep`	string
`NavigationItemToggleLabel`	string
`NavigationItemToggleIcon`	string

Full reference: TwSidebarTheme on the API docs.

TwSidebar

Basic Sidebar

Data-Driven Navigation (Programmatic)

Theme Configuration