# Layout
## Description
The BitLayout component builds the base UI structure of an application: a header, a footer and a middle row that holds a nav panel, the main content and an aside. Every section renders the HTML element that carries its landmark role, so a screen reader can jump straight to any of them, and an optional skip link gives a keyboard user the same shortcut to the content. The layout is only as tall as its content, which lets it be dropped into a box of any size, and each of its sections can be sized, hidden, bordered, pinned while the page scrolls or given a scrollport of its own.
## 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. 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, or a parent of a definite height. |
| SkipLink | `bool` | false | Renders a skip link as the first focusable element of the BitLayout, which jumps to the main section. The link stays out of sight until it is focused. |
| 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 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 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. |
| 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. |
| 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. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| 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. |
## 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. |
## Enums
### 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. |
## Sub Classes
### 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. |
## Examples
\n**Basic**:
```razor
```
\n**NavPanel**:
```razor
```
```csharp
private bool hideNavPanel;
```
\n**Aside**:
```razor
```
```csharp
private bool hideAside;
```
\n**Reverse**:
```razor
```
```csharp
private bool reverseNavPanel;
```
\n**FullHeightPanels**:
```razor
```
```csharp
private bool fullHeightPanels;
private bool reverseNavPanel2;
```
\n**Hiding sections**:
```razor
```
```csharp
private bool hideHeader;
private bool hideNavPanel2;
private bool hideAside2;
private bool hideFooter;
```
\n**Section heights**:
```razor
```
\n**Sticky sections**:
```razor
```
```csharp
private bool stickyHeader;
private bool stickyNavPanel;
private bool stickyAside;
private bool stickyFooter;
```
\n**FullHeight**:
```razor
```
```csharp
private bool fullHeight;
```
\n**ScrollableMain**:
```razor
```
```csharp
private bool scrollableMain;
```
\n**Gap & Padding**:
```razor
```
\n**Bordered**:
```razor
```
\n**Nested**:
```razor
Nested main
```
\n**Accessibility**:
```razor
```
\n**Style & Class**:
```razor
Header
NavPanel
Main
```
\n**RTL**:
```razor
```
Header
Main
Header
Main
Header
Main
Header
Main
Header
NavPanel
Main
Header
Main
64px header
Main
Header
Scroll me
Header
Main
Header
Scroll me
Scroll me
Header
Main
Header
NavPanel
Main
Header
NavPanel
Nested header
Nested nav
Header
Main
سربرگ
منو
محتوا