Layout

TwNavbar

TwNavbar is a responsive Blazor navbar with BrandContent, NavigationContent and ActionsContent slots, data-driven NavigationItems and keyboard support.

Last updated 24 September 2026

TwNavbar provides BrandContent, NavigationContent, and ActionsContent slots for hand-written markup. Responsive collapse is enabled by default - shrink the preview to see the mobile toggle appear.

Razor

<TwNavbar>
    <BrandContent>
        <a href="/" class="flex items-center gap-2 text-white font-bold tracking-tight">
            <TwIcon Icon="Icon.Lightning_Charge_Fill" />
            Acme
        </a>
    </BrandContent>
    <NavigationContent>
        <a href="/" class="px-3 py-2 rounded-md text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition-colors">Home</a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition-colors">Products</a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition-colors">Pricing</a>
    </NavigationContent>
    <ActionsContent>
        <TwButton Label="Sign in" Variant="ButtonVariant.Text" Color="Color.Light" />
        <TwButton Label="Get started" Variant="ButtonVariant.Filled" Color="Color.Accent" />
    </ActionsContent>
</TwNavbar>

Data-Driven Links

Pass NavigationItems instead of hand-written NavigationContent to render links (with optional icons) from a List<NavigationItem>, and mark one active with IsActive. Other slots such as BrandContent and ActionsContent still work alongside it.

Razor

<TwNavbar NavigationItems="@navigationItems">
    <BrandContent>
        <a href="/" class="flex items-center gap-2 text-white font-bold tracking-tight">
            <TwIcon Icon="Icon.Lightning_Charge_Fill" />
            Acme
        </a>
    </BrandContent>
    <ActionsContent>
        <TwButton Label="Sign in" Variant="ButtonVariant.Text" Color="Color.Light" />
    </ActionsContent>
</TwNavbar>

CSHARP

@code {
    private readonly List<NavigationItem> navigationItems =
    [
        new() { Label = "Home", Href = "/", Icon = Icon.House_Door_Fill, IsActive = true },
        new() { Label = "Products", Href = "#", Icon = Icon.Box_Seam_Fill },
        new() { Label = "Pricing", Href = "#", Icon = Icon.Tag_Fill }
    ];
}

Disable Responsive Collapse

Set DisableResponsiveCollapse to keep the navigation and actions slots always visible with no mobile toggle - useful when a parent layout, such as TwSidebar, already owns a mobile toggle. TwSidebar sets this on its embedded navbar for exactly that reason.

Razor

<TwNavbar DisableResponsiveCollapse>
    <BrandContent>
        <a href="/" class="flex items-center gap-2 text-white font-bold tracking-tight">
            <TwIcon Icon="Icon.Lightning_Charge_Fill" />
            Acme
        </a>
    </BrandContent>
    <NavigationContent>
        <a href="/" class="px-3 py-2 rounded-md text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition-colors">Home</a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition-colors">Products</a>
    </NavigationContent>
    <ActionsContent>
        <TwButton Label="Sign in" Variant="ButtonVariant.Text" Color="Color.Light" />
    </ActionsContent>
</TwNavbar>

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.

TwNavbar

Structured Navbar

Data-Driven Links

Disable Responsive Collapse

Theme Configuration