Skip to content
BlazorUI

Layouts

Layout

Bit.BlazorUI

The BitLayout component builds the base UI structure of an application: a header, a footer and a middle row holding a nav panel, the main content and an aside. Every section renders its landmark element (header, nav, main, aside, footer), and each can be sized, hidden, bordered, pinned or given a scrollport of its own.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

Header, Main and Footer render as the banner, main and contentinfo landmarks. A section without content is left out of the markup.

Header
Main
Footer

Panels

NavPanel (a nav) and Aside (an aside) sit on either side of the main content. NavPanelWidth and AsideWidth reserve their room in pixels; the panels still size to their own content. ReverseNavPanel swaps their sides without changing the reading order.


Header
Main
Footer

Hiding sections

HideHeader, HideNavPanel, HideAside and HideFooter take a section out of the markup, and the rest take its room - one layout serves pages with and without the chrome. The main section is always rendered.


Header
Main
Footer

Sizing

HeaderHeight and FooterHeight fix the bars to a height in pixels (border-box). Gap spaces the middle row and Padding insets the main section; both take any CSS value.

64px header
Main
40px footer

Bordered

Bordered draws the dividers between the sections. The vertical ones follow the reading direction and ReverseNavPanel, so they always sit between a panel and the content.

Header
Main
Footer

FullHeightPanels

FullHeightPanels turns the shape of a web page into that of an application: the panels run the full height and the header and footer sit between them. The widths then apply to the panels themselves and Gap also separates the header and the footer. The markup order, and so the reading order, is unchanged.


Header
Main
Footer

Sticky sections

StickyHeader, StickyFooter, StickyNavPanel and StickyAside pin a section while its scrolling ancestor (this box, or the page) scrolls. A pinned bar gets the page background so content does not show through it; the panels pin HeaderHeight below the top, leave FooterHeight for a sticky footer and scroll on their own. ZIndex sets the stacking order of the pinned sections. Scroll the box.


Header
Scroll me
Footer

FullHeight

The layout is as tall as its content by default, so it fits a card or a dialog. FullHeight makes it at least as tall as the visible viewport (100dvh), which keeps the footer of a short page at the bottom.


Header
Main
Footer

ScrollableMain

ScrollableMain is the application shell: the header and the footer stay put and each section of the middle row scrolls on its own. It needs a height to fill - FullHeight, or a parent with a definite height.


Header
Scroll me
Footer

Responsive

Drive the Hide parameters from a BitMediaQuery to drop a panel on small screens. Here the aside goes below the Md breakpoint and the nav panel below Sm. Resize the window.

Header
Main
Footer

Nested

A page may hold one main landmark, so a layout inside another one sets Nested: its main section renders as a plain div with the same id and classes. The other sections need nothing - nested headers and footers stop being banner and contentinfo on their own. An AriaLabel makes a nested layout a named region.

Header
Nested header
Nested main
Footer

Accessibility

SkipLink renders a "skip to main content" link as the first tab stop; it stays hidden until focused, and activating it scrolls to the main section and moves the focus there. SkipLinkText changes its wording. NavPanelAriaLabel and AsideAriaLabel tell the landmarks apart - don't repeat "navigation" or "complementary", which are announced already. Tab into the box to try it.

Skip to the content
Header bitplatform.dev
Main
Footer

Cascading parameters

BitParams hands a BitLayoutParams to every layout below it. The values are defaults: a parameter set on the layout itself wins.

Takes the cascade
Main

Its own Bordered and Gap
Main

Style & Class

Style and Class reach the root; Styles and Classes reach every part: Root, SkipLink, Header, Main (the middle row), NavPanel, MainContent (the main section), Aside and Footer.

Header
Main
Footer

The public CSS variables inherit, so one set on :root restyles every layout and one on Style restyles a single instance. A parameter (Gap, Padding, HeaderHeight, ...) wins over its variable.

Header
Main
Footer

RTL

Dir="BitDir.Rtl" lays the layout out right to left: the panels and the dividers mirror with it, and the direction cascades to the bit components inside.

سربرگ
محتوا
پاورقی

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 that one alone. Leave a variable unset and the component falls back to the theme token beside it.

BitLayout CSS variables

Name Default value Description
--bit-Layout-background transparent Background of the whole layout.
--bit-Layout-header-background transparent; --bit-clr-bg-pri while StickyHeader Background of the header. A pinned header is opaque by default, so the content scrolling under it does not show through.
--bit-Layout-footer-background transparent; --bit-clr-bg-pri while StickyFooter Background of the footer, opaque by default while it is pinned.
--bit-Layout-nav-panel-background transparent Background of the nav panel.
--bit-Layout-aside-background transparent Background of the aside.
--bit-Layout-main-background transparent Background of the main section.
--bit-Layout-color inherit Text color of the whole layout.
--bit-Layout-header-color inherit Text color of the header, the pair of --bit-Layout-header-background.
--bit-Layout-footer-color inherit Text color of the footer.
--bit-Layout-nav-panel-color inherit Text color of the nav panel.
--bit-Layout-aside-color inherit Text color of the aside.
--bit-Layout-main-color inherit Text color of the main section.
--bit-Layout-header-shadow none Box shadow of the header, for example --bit-shd-appbar-top for the elevation of an app bar over the content scrolling under a sticky header.
--bit-Layout-footer-shadow none Box shadow of the footer.
--bit-Layout-border-color --bit-clr-brd-pri Color of the dividers drawn by Bordered.
--bit-Layout-border-width --bit-shp-brd-width Thickness of the dividers drawn by Bordered.
--bit-Layout-header-height auto Height of the header, and the offset the pinned panels stick at (none while no header is rendered). The HeaderHeight parameter wins over it.
--bit-Layout-footer-height auto Height of the footer, and the room the pinned panels leave for a sticky footer (none while no footer is rendered). The FooterHeight parameter wins over it.
--bit-Layout-gap 0 Room between the sections of the middle row. The Gap parameter wins over it.
--bit-Layout-padding 0 Padding of the main section. The Padding parameter wins over it.
--bit-Layout-z-index --bit-zin-base Stacking order of the pinned sections. The ZIndex parameter wins over it.

API

Every parameter, public member, sub-class and enum this component exposes.

BitLayout parameters

Name Type Default value Description
Aside RenderFragment? null The content of the aside section, which sits next to the main content on the side opposite the nav panel. It renders a semantic aside element (the complementary landmark), and is left out of the markup entirely while it is null or HideAside is on.
AsideAriaLabel string? null The accessible label of the aside section, which is what tells more than one complementary landmark apart in the landmark list of a screen reader.
AsideWidth int 0 The width of the aside section in pixels. This is the room the main content leaves for the aside, not a width forced onto the aside itself, so an aside that takes itself out of the flow only has to be given 0 for the main content to span the whole row again.
Bordered bool false Draws divider lines between the sections of the BitLayout. The two vertical dividers follow the reading direction and swap sides along with ReverseNavPanel.
Classes BitLayoutClassStyles? null Custom CSS classes for different parts of the BitLayout.
Footer RenderFragment? null The content of the footer section. It renders a semantic footer element (the contentinfo landmark), and is left out of the markup entirely while it is null or HideFooter is on.
FooterHeight int? null The height of the footer section in pixels, including its paddings and border. It is also the room a sticky nav panel or aside leaves at the bottom for a sticky footer. When not set, the footer is as tall as its own content.
FullHeight bool false Makes the BitLayout fill at least the height of the viewport, so the footer of a short page still sits at the bottom of the screen. The height follows the browser chrome of a mobile device as it retracts.
FullHeightPanels bool false Makes the nav panel and the aside span the whole height of the BitLayout, with the header and the footer between them rather than above and below them. The panels are columns of their own here, so NavPanelWidth and AsideWidth are applied to the panels themselves.
Gap string? null The space between the nav panel, the main content and the aside (the CSS gap of the middle row). Takes any CSS length or the two value form of the gap shorthand.
Header RenderFragment? null The content of the header section. It renders a semantic header element (the banner landmark), and is left out of the markup entirely while it is null or HideHeader is on.
HeaderHeight int? null The height of the header section in pixels, including its paddings and border. It is also the offset a sticky nav panel or aside pins itself at, so a panel pinned under a sticky header starts right below it.
HideAside bool false Hides the aside section, which is removed from the markup so the main content takes the room it used to reserve for it.
HideFooter bool false Hides the footer section.
HideHeader bool false Hides the header section.
HideNavPanel bool false Hides the nav panel section, which is removed from the markup so the main content takes the room it used to reserve for it.
Main RenderFragment? null The content of the main section. It renders a semantic main element (the main landmark and the target of the skip link), and unlike the other sections it is always rendered.
NavPanel RenderFragment? null The content of the nav panel section. It renders a semantic nav element (the navigation landmark), and is left out of the markup entirely while it is null or HideNavPanel is on.
NavPanelAriaLabel string? null The accessible label of the nav panel section, which is what tells the navigation landmarks of a page apart in the landmark list of a screen reader.
NavPanelWidth int 0 The width of the nav panel section in pixels. This is the room the main content leaves for the panel, not a width forced onto the panel itself, so a panel that collapses to a rail or turns into an overlay drawer only has to be given 0 for the main content to span the whole row again.
Nested bool false Renders the main section as a plain element instead of the main landmark, for a BitLayout nested inside another one, since a page may hold only one main landmark. The section keeps its id, its classes and its place as the target of the skip link.
Padding string? null The padding around the content of the main section. Takes any CSS padding value; the main section is a border-box, so the padding is taken out of the width it already has rather than added to it.
ReverseNavPanel bool false Reverses the position of the nav panel and the aside inside the middle row, which puts the nav panel at the end of the row and the aside at its start.
ScrollableMain bool false Keeps the header and the footer in place and gives the sections of the middle row a scrollport of their own, which is the shape of an application shell. It needs the BitLayout to have a height to fill: FullHeight (which then holds it at exactly the viewport height), or a parent of a definite height.
SkipLink bool false Renders a skip link as the first focusable element of the BitLayout. It stays out of sight until focused, and activating it scrolls to the main section and moves the focus there.
SkipLinkText string? null The text of the skip link. The default value is "Skip to main content".
StickyAside bool false Enables sticky positioning of the aside, pinned HeaderHeight pixels from the top of the viewport and given the rest of it (less FooterHeight under a sticky footer) with its own scrollbar.
StickyFooter bool false Enables sticky positioning of the footer at the bottom of the viewport.
StickyHeader bool false Enables sticky positioning of the header at the top of the viewport.
StickyNavPanel bool false Enables sticky positioning of the nav panel, pinned HeaderHeight pixels from the top of the viewport and given the rest of it (less FooterHeight under a sticky footer) with its own scrollbar.
Styles BitLayoutClassStyles? null Custom CSS styles for different parts of the BitLayout.
ZIndex int? null The stacking order of the pinned sections of the BitLayout, which decides whether a sticky section passes over or under the other layers of the application. When not set, they take the base z-index of the theme.

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.
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.

BitLayoutClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the BitLayout.
SkipLink string? null Custom CSS classes/styles for the skip link of the BitLayout.
Header string? null Custom CSS classes/styles for the header section of the BitLayout.
Main string? null Custom CSS classes/styles for the middle row of the BitLayout that holds the nav panel, the main content and the aside.
NavPanel string? null Custom CSS classes/styles for the nav panel section of the BitLayout.
MainContent string? null Custom CSS classes/styles for the main-content section of the BitLayout.
Aside string? null Custom CSS classes/styles for the aside section of the BitLayout.
Footer string? null Custom CSS classes/styles for the footer section of the BitLayout.

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.