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.

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/obrana-boranija/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.

FooterLink has Text, Href (default "#") and OpenInNewTab, which adds target="_blank" and rel="noopener noreferrer". FooterSocialLink adds 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. Description alone does not make it render.
• Social links without text. When a link has only an icon, set AriaLabel so screen reader users hear where it goes.

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