Footer

The footer renders its content in a bar that is as tall as that content plus the paddings of its size. The Height parameter pins it to an exact height in pixels instead.

The variant decides how the color of the footer is painted: Fill (the default) uses it as the background, Outline keeps the background transparent and draws a border in it, and Text keeps the background transparent with no border, which lets the page show through the footer.

The content of the footer is a horizontal flex line, and Alignment decides how the free space of that line is shared. SpaceBetween is the classic website footer: a copyright note on one edge and the links on the other. Baseline and Stretch distribute nothing, so those two align the content on the cross axis instead of the horizontal one.

VerticalAlign is the other axis: it decides where the content sits in the height of a footer that is taller than its content, which is what a footer with an explicit Height or a stretched neighbour needs. It is centered by default, and the three space distributions have no meaning here.

The content of the footer is a single line by default, which squeezes every item once there is not enough room for all of them. Wrap lets it break onto more lines instead, so a footer that holds a credit line, a set of legal links and a row of icons stays readable on a narrow screen. The lines are separated by the row part of Gap and packed by VerticalAlign.

Bordered draws a divider on the top edge of the footer, and Elevated casts a shadow upwards. Both separate the footer from the content above it, which matters most when the footer is pinned over that content: a border is the flatter, quieter option and the shadow reads as the footer floating above the page.

The content of the footer sits in a container with paddings around it (the gutter). NoGutter removes them, so the content can run edge to edge - for a full width progress bar, a toolbar of buttons or any content bringing its own spacing.

The children of the footer sit right next to each other by default. Gap puts space between them, and it takes any CSS length (or the two value form of the gap shorthand) - so the same footer works for a tight row of icon buttons and for a widely spaced set of legal links.

Sticky keeps the footer in the flow but pins it to the bottom of the scrolling area until its own place in the content is reached, so it never covers anything. Fixed takes it out of the flow and anchors it to the bottom of the page, which does overlap the content: reserve room for it at the end of the page. Absolute is that same overlap scoped to a box - the footer of a card, a panel or a dialog - and it needs an ancestor with a position of its own to pin itself to. Only one position can win, and Fixed beats Absolute, which beats Sticky.

The two that really sit at the bottom of the screen, Fixed and Sticky, also add the bottom safe area inset of the device, so the footer never lands under a home indicator - and an explicit Height grows by that inset instead of losing part of itself to it.

Sticky (scroll inside the box):

Fixed (scoped to the box below for the sake of the demo):

Absolute (pinned to the bottom of the box that holds it, with no scoping trick needed):

Reveal hides a pinned footer while the scroll goes down and slides it back in as soon as the scroll goes up, so it gives the content the whole viewport while the user is reading and returns the moment they look for it. It is always revealed at the very top and at the very end of the scrolling area, and it needs Fixed or Sticky to have anything to slide over. The OnRevealChanged callback reports every flip of that state, and the read-only IsRevealed member holds it. A footer that hides itself never strands a keyboard user either: it comes back as soon as anything inside it takes the focus.

Scroll inside the box to hide and reveal the footer: revealed

RevealOffset holds the footer in place until the scroll has travelled that many pixels from the top, which keeps it from flickering away on a scroll that has barely started:

Hidden is the programmatic counterpart of Reveal: the footer slides away because the application says so rather than because the page is being scrolled, which is what a contextual bar belonging to only part of a workflow needs. Unlike Visibility, which switches the footer off at once, it animates in and out and keeps the room the footer occupies. A hidden footer is also marked inert, so none of its buttons can be clicked or reached with the keyboard while it is out of the view.

Translucent softens the background of the footer and blurs what passes behind it, so a pinned footer hints at the content it covers instead of cutting it off - the frosted glass of a native mobile bar. Only the Fill variant has a background to soften.

The footer renders a semantic footer element, which the browser exposes as the contentinfo landmark of the page - the region screen reader users jump to for the copyright, the legal links and the rest of the information about the page. That mapping only holds while the element is not nested in an article, aside, main, nav or section, so a page level footer belongs outside of them.

A page is meant to expose that landmark once, so a second footer (a toolbar of actions, a bar that belongs to one pane) needs an AriaLabel to tell the two apart when they are listed. There is no need to spell out the word footer in that label - the role is announced already.

A complete site footer: a centered credit line over a row of social links, all of it plain content handed to the footer.

The general colors of the theme are all available, and each of them works with every variant. Without a color the footer keeps the primary background and foreground of the theme, which is what a page level footer usually wants.

The size sets the paddings around the content, which is what makes a footer compact or roomy when its height is left to the content.

Style and Class reach the root element of the footer, while Styles and Classes reach each of its parts by name - the root and the container that holds the content.

Component's Style & Class:

Styles & Classes:

Use the Dir parameter to change the direction of the footer, which flips the alignment of its content and the side its paddings sit on.