Layouts
Footer
Bit.BlazorUI
The BitFooter component renders the bar at the bottom of a site or an application: a copyright line, legal links, social icons or a toolbar of actions. It renders a semantic footer element (the contentinfo landmark), lays its content out in a themeable flex line, and can be pinned to the bottom of the viewport, reveal itself on scroll, or slide away on demand.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
As tall as its content plus the paddings of its size; Height fixes it in pixels.
Variant
Fill (default) paints the color as the background, Outline as a border, Text as the text alone.
Border & elevation
Bordered draws a divider on the top edge; Elevated casts a shadow upwards, over the content above.
Alignment
Alignment distributes the content along the line (SpaceBetween is the classic copyright-left, links-right footer).
VerticalAlign places it in the height of a footer taller than its content (centered by default).
Spacing & wrap
Gap spaces the children (any CSS length, or the two value gap shorthand). Wrap breaks a crowded line
instead of squeezing it. MaxWidth centers the content in a column while the bar stays full width.
NoGutter removes the paddings for edge to edge content.
Position
Sticky stays in the flow and sticks to the bottom of the scrolling area. Fixed pins to the bottom of the
page and overlaps the content (reserve room for it). Absolute pins to the nearest positioned ancestor.
Fixed beats Absolute, which beats Sticky. Fixed and Sticky also make room for the device's bottom safe area.
Sticky (scroll inside the box):
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Row 11
Row 12
Fixed (scoped to the box below for the sake of the demo):
The fixed footer covers the bottom of its page.
Absolute:
The absolute footer covers the bottom of its container.
Reveal
Reveal slides a Fixed or Sticky footer away while scrolling down and back while scrolling up; it is always
shown at both ends, and comes back when anything inside it takes the focus. OnRevealChanged and
IsRevealed report the state.
Scroll inside the box: revealed
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Row 11
Row 12
RevealOffset keeps it in place for the first pixels of a scroll. ScrollTarget names the scrolling
element when the footer is not inside it, as in an app shell whose pane and footer are siblings:
Elevate on scroll
ElevateOnScroll shadows a Fixed or Sticky footer only while content is left underneath it, and fades the
shadow out at the end of the scroll. OnOverlapChanged and IsOverlapping report the state;
Elevated takes precedence.
Scroll to the end of the box: at the end
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Row 11
Row 12
Hidden
Hidden slides the footer away on demand (a contextual action bar, for example). Unlike Visibility
it animates and keeps its room, and a hidden footer is inert: nothing in it can be clicked or focused.
Translucent
Translucent softens the background and blurs what scrolls behind it (Fill variant only).
Content behind the footer - row 1
Content behind the footer - row 2
Content behind the footer - row 3
Content behind the footer - row 4
Content behind the footer - row 5
Content behind the footer - row 6
Accessibility
A footer element outside article, aside, main, nav and section is the page's contentinfo landmark.
Give any additional footer an AriaLabel (no need to say "footer") so the landmarks can be told apart.
A pinned footer can hide the control the focus just moved to (WCAG 2.4.11). ScrollPadding reserves the
footer's height at the bottom of the scrolling area so the browser stops short of it. Tab through both boxes:
Without ScrollPadding
With ScrollPadding
Usage
A complete site footer: credit and legal links split across a centered column, wrapping on narrow screens.
Cascading parameters
BitParams hands a BitFooterParams to every footer under it. The values are defaults, not overrides:
a parameter a footer sets itself wins.
Color
Every theme color works with every variant. Without one, the footer uses the theme's primary background and foreground.
Size
The size sets the paddings around the content.
Style & Class
Style and Class reach the root; Styles and Classes reach the root and the content
container by name.
Component's Style & Class:
Styles & Classes:
CSS variables inherit: set one on
:root or an ancestor to
re-skin every footer below it, or on the Style of one footer. They restyle the default, not a choice: an explicit
Color or Size wins over the variables for what it sets:
RTL
Use the Dir parameter to change the direction of the footer, which flips the alignment of its content.
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitFooter CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-Footer-background | --bit-clr-bg-pri | Background of the Fill variant, softened by Translucent. The Color parameter wins over it. The Fill variant, the only one reading it, reads --bit-Footer-fill-background ahead of it. |
| --bit-Footer-fill-background | --bit-Footer-background | Background of a Fill footer alone, read ahead of --bit-Footer-background, like every variable a variant reads. The Color parameter wins over it. |
| --bit-Footer-color | --bit-clr-fg-pri | Text color. The Color parameter wins over it. Shared by the three variants: --bit-Footer-fill-color, --bit-Footer-outline-color and --bit-Footer-text-color are read ahead of it. |
| --bit-Footer-fill-color | --bit-Footer-color | Text color of a Fill footer alone, read ahead of --bit-Footer-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| --bit-Footer-outline-color | --bit-Footer-color | Text color of an Outline footer alone, read ahead of --bit-Footer-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| --bit-Footer-text-color | --bit-Footer-color | Text color of a Text footer alone, read ahead of --bit-Footer-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| --bit-Footer-border-color | --bit-clr-brd-pri | Color of the Outline border and of the Bordered divider. The Color parameter wins over it. Shared by the three variants: --bit-Footer-fill-border-color, --bit-Footer-outline-border-color and --bit-Footer-text-border-color are read ahead of it. |
| --bit-Footer-fill-border-color | --bit-Footer-border-color | Color of the divider of a Bordered Fill footer alone, read ahead of --bit-Footer-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| --bit-Footer-outline-border-color | --bit-Footer-border-color | Color of the border of an Outline footer alone, read ahead of --bit-Footer-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| --bit-Footer-text-border-color | --bit-Footer-border-color | Color of the divider of a Bordered Text footer alone, read ahead of --bit-Footer-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| --bit-Footer-padding | spacing(1) spacing(3) | Padding around the content. The Size parameter wins over it, and NoGutter still removes it. |
| --bit-Footer-gap | 0 | Space between the children. The Gap parameter takes precedence. |
| --bit-Footer-max-width | none | Maximum width of the centered content. The MaxWidth parameter takes precedence. |
| --bit-Footer-min-height | auto | Smallest height of the footer. |
| --bit-Footer-font-size | inherit | Text size of the content. |
| --bit-Footer-radius | 0 | Corner radius, for a floating or card-like footer. |
| --bit-Footer-shadow | --bit-shd-appbar-bottom | Shadow of an Elevated (or ElevateOnScroll) footer. |
| --bit-Footer-blur | 12px | Backdrop blur of a Translucent footer. The Fill variant, the only one reading it, reads --bit-Footer-fill-blur ahead of it. |
| --bit-Footer-fill-blur | --bit-Footer-blur | Backdrop blur of a Translucent Fill footer alone, read ahead of --bit-Footer-blur, like every variable a variant reads. |
| --bit-Footer-z-index | --bit-zin-base | Stacking order of a Fixed, Sticky or Absolute footer. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitFooter parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Absolute | bool | false | Renders the footer with an absolute position at the bottom of its nearest positioned ancestor. Fixed takes precedence over it, and it takes precedence over Sticky. |
| Alignment | BitAlignment? | null | Gets or sets the horizontal distribution of the content of the BitFooter (the CSS justify-content of the container). Baseline and Stretch act on the cross axis (the vertical alignment) instead. |
| Bordered | bool | false | Renders a divider line on the top edge of the BitFooter to separate it from the content above. |
| ChildContent | RenderFragment? | null | Gets or sets the content to be rendered inside the BitFooter. |
| Classes | BitFooterClassStyles? | null | Custom CSS classes for different parts of the BitFooter. |
| Color | BitColor? | null | The general color of the BitFooter. It is applied through the Variant: as the background color in the Fill variant, and as the text and border color in the Outline and Text variants. An explicit value wins over the --bit-Footer-* color variables; left unset, the footer keeps the primary background and foreground colors of the theme unless they say otherwise. |
| ElevateOnScroll | bool | false | Shadows a Fixed or Sticky footer only while there is content left underneath it, and fades the shadow out at the end of the scrolling area. Elevated takes precedence. |
| Elevated | bool | false | Renders the BitFooter with a shadow cast upwards, to lift it above the content it overlaps. |
| Fixed | bool | false | Renders the footer with a fixed position at the bottom of the page. It takes precedence over Absolute and Sticky when more than one of them is set. |
| Gap | string? | null | Gets or sets the space between the children of the BitFooter (the CSS gap of the container). It takes any CSS length or the two value form of the gap shorthand. |
| Height | int? | null | Gets or sets the height of the BitFooter (in pixels). The height includes the paddings and the border of the footer, and a Fixed or Sticky footer adds the bottom safe area inset of the device on top of it. |
| Hidden | bool | false | Slides the BitFooter out of the view, and brings it back when it is turned off again. A hidden footer is also marked inert, so nothing inside it can be clicked or reached with the keyboard while it is out of the view. |
| MaxWidth | string? | null | Gets or sets the maximum width of the content of the BitFooter, which is then centered in the footer. The footer itself keeps spanning the full width. |
| NoGutter | bool | false | Removes the default paddings around the content of the BitFooter, so it can span the full width of the footer. |
| OnOverlapChanged | EventCallback<bool> | Callback for when the overlap state of the footer changes. The provided value is true while there is content left underneath the footer. Only invoked while ElevateOnScroll is enabled. | |
| OnRevealChanged | EventCallback<bool> | Callback for when the reveal state of the footer changes. The provided value is true when the footer is revealed. Only invoked while Reveal is enabled. | |
| Reveal | bool | false | Slides the footer out of the view while the page is scrolled down and brings it back while the page is scrolled up. It only has an effect on a Fixed or Sticky footer, and the footer comes back as soon as anything inside it takes the focus. |
| RevealOffset | int? | null | Gets or sets how far (in pixels) the scroll has to travel from the top before a Reveal footer starts hiding itself. The footer stays revealed while the scroll is still within this offset. |
| ScrollPadding | bool | false | Reserves the height of a Fixed or Sticky BitFooter as the bottom scroll padding of the scrolling area, so a focused control, an anchor or a scrollIntoView target never lands underneath it (WCAG 2.4.11). |
| ScrollTarget | string? | null | Gets or sets the CSS selector of the element whose scrolling drives the BitFooter (Reveal and ScrollPadding). When not set, or when it matches nothing, the nearest scrolling ancestor (or the page) is used. |
| Size | BitSize? | null | The size of the BitFooter, which determines the paddings around its content. An explicit value wins over --bit-Footer-padding; left unset, the footer is medium unless it says otherwise. |
| Sticky | bool | false | Renders the footer with a sticky position at the bottom of the viewport. Unlike Fixed, it stays in the normal flow, so it never overlaps the content. |
| Styles | BitFooterClassStyles? | null | Custom CSS styles for different parts of the BitFooter. |
| Translucent | bool | false | Softens the background of the BitFooter and blurs what passes behind it, for the frosted glass look of a footer pinned over scrolling content. Only the Fill variant has a background to soften. |
| Variant | BitVariant? | null | The visual variant of the BitFooter. |
| VerticalAlign | BitAlignment? | null | Gets or sets the vertical alignment of the content of the BitFooter (the CSS align-items of the container). Only Start, End, Center, Baseline and Stretch align a line on the cross axis, so the three space distributions are ignored here. |
| Wrap | bool | false | Lets the content of the BitFooter wrap onto more than one line instead of being squeezed into a single one. The lines are packed by VerticalAlign and separated by the row part of Gap. |
BitFooter public members
| Name | Type | Default value | Description |
|---|---|---|---|
| IsOverlapping | bool | false | Gets a value indicating whether there is content left underneath the footer (its scrolling area is not at its end). It is always false unless ElevateOnScroll is enabled. |
| IsRevealed | bool | true | Gets a value indicating whether the footer is currently revealed. It reports the scroll driven reveal state alone, so it is always true unless Reveal is enabled, and stays true for a footer slid out of the view with Hidden. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitAlignment enum
| Name | Value | Description |
|---|---|---|
| Start | 0 | Packs the content at the start of the line, or at the top of the footer. |
| End | 1 | Packs the content at the end of the line, or at the bottom of the footer. |
| Center | 2 | Packs the content at the center of the line, or in the middle of the footer. |
| SpaceBetween | 3 | Distributes the free space between the items, with no space at the two edges. Ignored by VerticalAlign. |
| SpaceAround | 4 | Distributes the free space around the items, so the edges get half of what sits between the items. Ignored by VerticalAlign. |
| SpaceEvenly | 5 | Distributes the free space evenly between the items and at the two edges. Ignored by VerticalAlign. |
| Baseline | 6 | Aligns the content on its baseline (the cross axis of the footer). |
| Stretch | 7 | Stretches the content to the full height of the footer (the cross axis). |
BitColor enum
| Name | Value | Description |
|---|---|---|
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
BitSize enum
| Name | Value | Description |
|---|---|---|
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
BitVariant enum
| Name | Value | Description |
|---|---|---|
| Fill | 0 | Fill styled variant. |
| Outline | 1 | Outline styled variant. |
| Text | 2 | Text styled variant. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.