OsirionFooter

OsirionFooter renders a site footer: a top row with your logo and description, columns of links and social links, then a bottom row with the copyright line and legal links. Everything is plain markup, so it works the same under static SSR and interactive rendering.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub.

@using Osirion.Blazor.Components

@* Link targets are pages of this documentation site *@
<OsirionFooter CompanyName="Example Ltd"
               Variant="minimal"
               Description="A sample footer with link columns, a social link and legal links."
               Links="links"
               SocialLinks="socialLinks"
               BottomLinks="legalLinks" />

@code {
    private readonly IReadOnlyList<FooterSection> links =
    [
        new FooterSection
        {
            Title = "Components",
            Links =
            [
                new FooterLink { Text = "Layout", Href = "/components/layout" },
                new FooterLink { Text = "Page layout", Href = "/components/page-layout" }
            ]
        },
        new FooterSection
        {
            Title = "Project",
            Links =
            [
                new FooterLink { Text = "Source code", Href = "https://github.com/demonjic/Osirion.Blazor", OpenInNewTab = true }
            ]
        }
    ];

    private readonly IReadOnlyList<FooterSocialLink> socialLinks =
    [
        new FooterSocialLink { Text = "GitHub", Href = "https://github.com/demonjic/Osirion.Blazor", AriaLabel = "Osirion.Blazor on GitHub" }
    ];

    private readonly IReadOnlyList<FooterLink> legalLinks =
    [
        new FooterLink { Text = "Layout overview", Href = "/components/layout" },
        new FooterLink { Text = "Footer", Href = "/components/footer" }
    ];
}

The demo uses the minimal variant with sample text. On its own the footer renders a footer element, so it adds a second contentinfo landmark to this page; in a real layout, put it in the Footer slot of OsirionPageLayout instead.

Usage

With only a company name, the footer shows a copyright line for the current year:

@using Osirion.Blazor.Components

<OsirionFooter CompanyName="Example Ltd" CompanyUrl="https://example.com" />

A fuller footer passes link data from code:

<OsirionFooter CompanyName="Example Ltd"
               CompanyUrl="/"
               Description="Components for content sites built with Blazor."
               Links="links"
               SocialLinks="socialLinks"
               BottomLinks="legalLinks">
    <Logo>
        <img src="/logo.svg" width="40" height="40" alt="Example Ltd" />
    </Logo>
</OsirionFooter>

@code {
    private readonly IReadOnlyList<FooterSection> links =
    [
        new FooterSection
        {
            Title = "Documentation",
            Links =
            [
                new FooterLink { Text = "Getting started", Href = "/docs" },
                new FooterLink { Text = "Components", Href = "/docs/components" }
            ]
        },
        new FooterSection
        {
            Title = "Project",
            Links =
            [
                new FooterLink { Text = "Source code", Href = "https://github.com/demonjic/Osirion.Blazor", OpenInNewTab = true }
            ]
        }
    ];

    private readonly IReadOnlyList<FooterSocialLink> socialLinks =
    [
        new FooterSocialLink { Text = "NuGet", Href = "https://www.nuget.org/packages/Osirion.Blazor", AriaLabel = "Osirion.Blazor on NuGet" }
    ];

    private readonly IReadOnlyList<FooterLink> legalLinks =
    [
        new FooterLink { Text = "Privacy", Href = "/privacy" },
        new FooterLink { Text = "Terms", Href = "/terms" }
    ];
}

FooterSection, FooterLink and FooterSocialLink are in the Osirion.Blazor.Components namespace.

Parameters

Class, Style and unmatched attributes go on the outer element.

FooterSection has Title (optional) and Links. FooterLink has Text, Href (default "#") and OpenInNewTab, which adds target="_blank" and rel="noopener noreferrer". FooterSocialLink extends FooterLink with Icon and AriaLabel; social links always open in a new tab.

Behavior

• Landmark. On its own the footer is a footer element. Inside the Footer slot of OsirionPageLayout it renders a div with the same classes, because the layout already provides the footer landmark. Available from 4.0; in 3.x the footer nested a second footer.
• Headings. Section titles and the social title are h2 elements, so the outline does not skip a level after a page's h1.
• Legal links are wrapped in a nav labelled "Footer legal navigation".
• Top row. It renders when at least one of Logo, Links, SocialLinks, LeftContent or RightContent is set. SocialLinks count only while ShowSocialLinks is on, so switching them off leaves no empty row. Description alone does not make it render.
• Copyright year. The default line uses the server's current year each time the component renders, so a static export shows the year of the export.
• Small screens. Below 768 pixels the top row stacks into one column: the links, the left content, then the right content. With a Logo, the logo and description come first.
• Social links without text. When a link has only an icon, set AriaLabel so screen reader users hear where it goes.
• Printing. The footer is hidden when the page is printed.

Styling

The outer element has osirion-footer, osirion-footer-{Variant} and osirion-footer-grid-{GridLayout}, plus osirion-footer-docked-{DockingMode} when docked. Inner parts include osirion-footer-main, osirion-footer-brand, osirion-footer-links, osirion-footer-section-title, osirion-footer-link, osirion-footer-social-link, osirion-footer-divider, osirion-footer-bottom, osirion-footer-copyright and osirion-footer-bottom-link.

Colors come from the theme tokens --osirion-background-primary, --osirion-text-primary, --osirion-text-secondary, --osirion-border-color and --osirion-action-primary, so the CSS framework adapters recolor the footer. With Theme set to Light or Dark, the footer overrides those tokens on itself.

A fixed footer (Docked="true" with DockingMode="fixed") covers the end of the page. Give your main content a bottom padding equal to the footer's height in your own stylesheet; the component's scoped stylesheet does not reach the body.

Related

• OsirionPageLayout
• OsirionContactInfoSection
• OsirionSubscriptionCard
• Layout overview