# Header ## Description The BitHeader component renders a bar at the top of a site or an application, holding whatever belongs there: a brand, a navigation toggle, a search box or a row of account actions. It renders a semantic header element - the banner landmark of the page - and lays its content out in a horizontal line whose color, variant, size, alignment, wrapping, gutters, spacing and maximum width are all parameters. It can stay in the flow or be pinned to the top of the viewport, hiding itself while the page is scrolled down, lifting itself off the content once the page has left its top, or sliding out of the way on demand - and it carries the accessibility a pinned bar owes its users, from the skip link past it to the room it reserves so nothing scrolled to lands underneath it. ## Parameters | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | Absolute | `bool` | false | Renders the header with an absolute position at the top 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 BitHeader (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 bottom edge of the BitHeader to separate it from the content below. | | ChildContent | `RenderFragment?` | null | Gets or sets the content to be rendered inside the BitHeader. | | Classes | `BitHeaderClassStyles?` | null | Custom CSS classes for different parts of the BitHeader. | | Color | `BitColor?` | null | The general color of the BitHeader. 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. | | ElevateOffset | `int?` | null | Gets or sets how far (in pixels) the scroll has to travel from the top before an ElevateOnScroll header lifts itself off the content. | | ElevateOnScroll | `bool` | false | Keeps the BitHeader flat while the scrolling area sits at its top and lets it cast its shadow only once the content has been scrolled underneath it. It only has an effect on a Fixed or Sticky header, and Elevated takes precedence over it. | | Elevated | `bool` | false | Renders the BitHeader with a shadow cast downwards, to lift it above the content it overlaps. | | Fixed | `bool` | false | Renders the header with a fixed position at the top 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 BitHeader (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 BitHeader (in pixels). The height includes the paddings and the border of the header, and a header that really sits at the top of the screen (Fixed, or Sticky without an Absolute outranking it) adds the top safe area inset of the device on top of it. | | Hidden | `bool` | false | Slides the BitHeader out of the view, and brings it back when it is turned off again. A hidden header 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 BitHeader, which is then centered in the header. The header itself keeps spanning the full width, so its background, its border and its shadow still run edge to edge. | | NoGutter | `bool` | false | Removes the default paddings around the content of the BitHeader, so it can span the full width of the header. | | OnRevealChanged | `EventCallback<bool>` | | Callback for when the reveal state of the header changes. The provided value is true when the header is revealed. Only invoked while Reveal is enabled. | | OnScrolledChanged | `EventCallback<bool>` | | Callback for when the scrolled state of the header changes. The provided value is true once the scrolling area has travelled past the ElevateOffset. Only invoked while ElevateOnScroll is enabled. | | Reveal | `bool` | false | Slides the header 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 header, since the others have nothing to slide over. | | RevealOffset | `int?` | null | Gets or sets how far (in pixels) the scroll has to travel from the top before a Reveal header starts hiding itself. The header stays revealed while the scroll is still within this offset. | | ScrollPadding | `bool` | false | Reserves the height of the BitHeader at the top of the scrolling area, so nothing scrolled to - the target of an anchor, a control that has just taken the focus, a call to scrollIntoView - lands underneath a pinned header (WCAG 2.4.11). It only has an effect on a Fixed or Sticky header. | | ScrollTarget | `string?` | null | Gets or sets the CSS selector of the element whose scrolling drives the BitHeader. By default the header finds its own scrolling area by walking up from itself, and a selector that matches nothing falls back to that walk. | | Size | `BitSize?` | null | The size of the BitHeader, which determines the paddings around its content. | | SkipLinkHref | `string?` | null | Gets or sets the target of the skip link of the BitHeader, which is what makes it render at all. It is rendered as the very first focusable element of the header and stays out of sight until it is focused. | | SkipLinkText | `string?` | null | Gets or sets the text of the skip link of the BitHeader. It defaults to "Skip to main content" and is only rendered when a SkipLinkHref is provided. | | Sticky | `bool` | false | Renders the header with a sticky position at the top of the viewport. Unlike Fixed, it keeps the room it occupies in the layout, so nothing has to be reserved for it, and it only covers the content once that content scrolls up to it. | | Styles | `BitHeaderClassStyles?` | null | Custom CSS styles for different parts of the BitHeader. | | Translucent | `bool` | false | Softens the background of the BitHeader and blurs what passes behind it, for the frosted glass look of a header pinned over scrolling content. Only the Fill variant has a background to soften. | | Variant | `BitVariant?` | null | The visual variant of the BitHeader. | | VerticalAlign | `BitAlignment?` | null | Gets or sets the vertical alignment of the content of the BitHeader (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 BitHeader 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. | | 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 | | :--- | :--- | :------------ | :---------- | | IsRevealed | `bool` | true | Gets a value indicating whether the header 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 header slid out of the view with Hidden. | | IsScrolled | `bool` | false | Gets a value indicating whether the scrolling area of the header has travelled past the ElevateOffset. It is always false unless ElevateOnScroll is enabled. | | 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 ### BitAlignment Enum | Name | Value | Description | | :--- | :--- | :---------- | | Start | 0 | Packs the content at the start of the line, or at the top of the header. | | End | 1 | Packs the content at the end of the line, or at the bottom of the header. | | Center | 2 | Packs the content at the center of the line, or in the middle of the header. | | 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 header). | | Stretch | 7 | Stretches the content to the full height of the header (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. | ## Sub Classes ### BitHeaderClassStyles Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | Root | `string?` | null | Custom CSS classes/styles for the root element of the BitHeader. | | Container | `string?` | null | Custom CSS classes/styles for the container element of the BitHeader that wraps its content. | | SkipLink | `string?` | null | Custom CSS classes/styles for the skip link of the BitHeader, which is only rendered when a SkipLinkHref is provided. | ## Examples \n**Basic**: ```razor I'm a Header I'm a Header with a fixed 80px height I'm a disabled Header ``` \n**Variant**: ```razor Fill Outline Text ``` \n**Alignment**: ```razor ``` \n**Wrap**: ```razor ``` \n**Border & elevation**: ```razor Bordered Elevated Bordered & Elevated ``` \n**Gutter**: ```razor With the default gutter ``` \n**Gap**: ```razor ``` \n**Max width**: ```razor ``` \n**Position**: ```razor ``` \n**Reveal**: ```razor ``` ```csharp private bool isHeaderRevealed = true; ``` \n**Elevate on scroll**: ```razor ``` ```csharp private bool isHeaderScrolled; ``` \n**Scroll target**: ```razor ``` \n**Hidden**: ```razor ``` ```csharp private bool isImmersiveMode; ``` \n**Translucent**: ```razor ``` \n**Accessibility**: ```razor Discard Save My Awesome App ``` \n**Usage**: ```razor My Awesome App ``` \n**Color**: ```razor Primary Secondary Tertiary Info Success Warning SevereWarning Error PrimaryBackground SecondaryBackground TertiaryBackground PrimaryForeground SecondaryForeground TertiaryForeground PrimaryBorder SecondaryBorder TertiaryBorder ``` \n**Size**: ```razor Small Medium Large ``` \n**Style & Class**: ```razor Styled Header Classed Header Styles Classes ``` \n**RTL**: ```razor ```