Layout

TwFooter

TwFooter is an accessible Blazor page footer with columns of links, a brand slot, free-form content and a bottom row for copyright and legal links.

Last updated 18 October 2026

Basic usage

TwFooter draws a page footer from data. Pass Sections, each a title and its links, and every section becomes a column. A link can be written as a label and an address, so a whole footer fits in a few lines.

RAZOR

<TwFooter Sections="@_sections" />

CSHARP

@code {
    private readonly FooterSection[] _sections =
    [
        new("Product", [("Features", "/footer"), ("Pricing", "/footer"), ("Changelog", "/footer")]),
        new("Company", [("About", "/footer"), ("Careers", "/footer"), ("Contact", "/footer")]),
        new("Resources", [("Documentation", "/footer"), ("Guides", "/footer"), ("Support", "/footer")]),
        new("Legal", [("Privacy", "/footer"), ("Terms", "/footer")])
    ];
}

Copyright and legal links

Copyright and BottomLinks fill a row along the bottom, under a divider. Either can be used alone, and with no sections the row is the whole footer.

RAZOR

<TwFooter Sections="@_sections" Copyright="© 2026 Acme Ltd. All rights reserved." BottomLinks="@_legal" />

CSHARP

@code {
    private readonly FooterLink[] _legal = [("Privacy", "/footer"), ("Terms", "/footer"), ("Cookies", "/footer")];
}

RAZOR

<TwFooter Copyright="© 2026 Acme Ltd. All rights reserved." BottomLinks="@_legal" />

Brand, content and extras

Three slots take your own markup. BrandContent sits above the sections, for a logo and a line about the company. ChildContent comes after the sections, for anything the data model does not cover, such as a newsletter form. BottomContent joins the bottom row, for social links or a language picker.

RAZOR

<TwFooter Sections="@_sections" Copyright="© 2026 Acme Ltd." BottomLinks="@_legal">
    <BrandContent>
        <p class="flex items-center gap-2 text-lg font-bold text-gray-900 dark:text-white"><TwIcon Icon="Icon.Lightning_Charge_Fill" /> Acme</p>
        <p class="mt-2 max-w-sm text-sm">Tools that help small teams ship faster.</p>
    </BrandContent>
    <ChildContent>
        <form class="flex max-w-md flex-wrap items-end gap-3" @onsubmit:preventDefault @onsubmit="@(() => subscribed = true)">
            <div class="min-w-0 flex-1">
                <TwTextfield Id="footer-newsletter" Label="Get our newsletter" @bind-Value="email" Placeholder="[email protected]" type="email" autocomplete="email" />
            </div>
            <TwButton Label="Subscribe" Color="Color.Primary" Type="submit" />
            <p class="w-full text-sm" role="status">@(subscribed ? "Thanks. This form is only an example, so nothing was sent." : string.Empty)</p>
        </form>
    </ChildContent>
    <BottomContent>
        <div class="flex gap-1">
            <TwIcon Icon="Icon.Github" AriaLabel="Acme on GitHub" OnClick="@(() => { })" />
            <TwIcon Icon="Icon.Rss" AriaLabel="Acme news feed" OnClick="@(() => { })" />
        </div>
    </BottomContent>
</TwFooter>

Icons and links that open elsewhere

Use the full FooterLink to give a link an Icon or set OpensInNewTab. A link that opens in a new tab tells assistive technology so, and is given rel="noopener noreferrer".

RAZOR

<TwFooter Sections="@_community" NavigationLabel="Community links" />

CSHARP

@code {
    private readonly FooterSection[] _community =
    [
        new("Community",
        [
            new("GitHub", "https://github.com/twblazor/twblazor", Icon.Github, OpensInNewTab: true),
            new("News feed", "/footer", Icon.Rss)
        ]),
        new("Help", [("Documentation", "/footer"), new FooterLink("Status page", "https://example.com/status", OpensInNewTab: true)])
    ];
}

Heading level

Section titles are real headings, so they appear in a screen reader's heading list. They are level 2 by default. Set HeadingLevel so they follow on from the headings above the footer on your page.

RAZOR

<TwFooter Sections="@_sections" HeadingLevel="3" />

Accessibility

The component renders a footer element, which is the page's content information landmark as long as it is not inside an article, section or main. Use one per page. The sections sit in a navigation landmark named "Footer links"; change the name with NavigationLabel if the page has another landmark with the same name. Each section is a heading followed by a list named by that heading, so the group and the number of links in it are announced. Give the footer itself a name with AriaLabel if the page has more than one.

Every link is an ordinary tab stop in reading order. The focus outline takes the footer's own text color, so it stays visible on any background a theme gives it. Icons beside links are decorative and hidden from assistive technology.

The footer is the page's content information landmark. Its sections sit in a navigation landmark, each a heading and a list of ordinary links.

Key	What it does
`Tab` or `Shift` plus `Tab`	Moves to the next or previous link.
`Enter`	Follows the focused link. A link that opens in a new tab says so before you follow it.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwFooterTheme), 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
`Footer`	string
`Container`	string
`Brand`	string
`Sections`	string
`Section`	string
`SectionTitle`	string
`LinkList`	string
`Link`	string
`Content`	string
`Bottom`	string
`Copyright`	string
`BottomLinks`	string

Full reference: TwFooterTheme on the API docs.

TwFooter

Basic usage

Copyright and legal links

Brand, content and extras

Icons and links that open elsewhere

Heading level

Accessibility

Keyboard navigation

Theme configuration