HxNavbar #
Bootstrap 5 Navbar component - responsive navigation header.
With support for branding, navigation, and more, including support for the collapse plugin.
Basic usage #
Brand #
Text brand #
Image/icon brand #
Text #
Navbars may contain bits of text with the help of <HxNavbarText /> component.
Color schemes #
Colors can be set with Color and ColorScheme parameters.
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| ChildContent | RenderFragment |
Content of the navbar. |
| Color | ThemeColor |
Color (background).
Default is ThemeColor.Light. |
| ColorScheme | NavbarColorScheme |
Color scheme. Default is NavbarColorScheme.Light. |
| ContainerCssClass | string |
Container CSS class. Default is container-fluid. |
| CssClass | string |
Additional CSS class. |
| Expand | NavbarExpand |
Responsive expand setting (breakpoint) for HxNavbar.Default is NavbarExpand.LargeUp. |
| Id | string |
Element ID. (Autogenerated GUID if not set explicitly.) |
HxNavbarBrand #
Bootstrap navbar-brand component.
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| ChildContent | RenderFragment |
Content of the navbar-brand. |
| CssClass | string |
Additional CSS class. |
| Href | string |
The navigation target. Default is "/". |
HxNavbarToggler #
Bootstrap 5 navbar-toggler component.
Derived from HxCollapseToggleButton.
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| AdditionalAttributes | Dictionary<string, object> |
Additional attributes to be splatted onto an underlying <button> element. |
| ChildContent | RenderFragment |
Button content. |
| CollapseTarget | string |
Target selector of the toggle.
Use #id to reference single HxCollapse or .class for multiple HxCollapses. |
| Color | ThemeColor? |
Bootstrap button style - theme color. Default is taken from HxButton.Defaults (ThemeColor.None if not customized). |
| CssClass | string |
Custom CSS class to render with the <button />.When using Tooltip you might want to use TooltipWrapperCssClass instead of CssClass to get the desired result. |
| EditContext | EditContext |
Associated EditContext. |
| Enabled | bool? |
When null (default), the Enabled value is received from cascading FormState.
When value is false, input is rendered as disabled.
To set multiple controls as disabled use HxFormState. |
| FormId | string |
Specifies the form the button belongs to. |
| Icon | IconBase |
Icon to render into the button. |
| IconCssClass | string |
CSS class to be rendered with the button icon. |
| IconPlacement | ButtonIconPlacement? |
Position of the icon within the button. Default is ButtonIconPlacement.Start (configurable through HxButton.Defaults). |
| OnClick | EventCallback<MouseEventArgs> |
Raised after the button is clicked. |
| OnClickPreventDefault | bool |
Prevents the default action for the onclick event. Default is false. |
| OnClickStopPropagation | bool |
Stop onClick-event propagation. Default is true. |
| OnInvalidClick | EventCallback<MouseEventArgs> |
Raised after the button is clicked and EditContext validation fails. |
| OnValidClick | EventCallback<MouseEventArgs> |
Raised after the button is clicked and EditContext validation succeeds. |
| Outline | bool? |
Bootstrap "outline" button style. |
| Settings | ButtonSettings |
Set of settings to be applied to the component instance (overrides HxButton.Defaults, overridden by individual parameters). |
| SingleClickProtection | bool |
Set false if you want to allow multiple OnClick handlers in parallel. Default is true. |
| Size | ButtonSize? |
Button size. Default is ButtonSize.Regular. |
| Spinner | bool? |
Set state of the embedded HxSpinner.
Leave null if you want automated spinner when any of the OnClick handlers is running.
You can set an explicit false constant to disable (override) the spinner automation. |
| Text | string |
Text of the button. |
| Tooltip | string |
Tooltip text. If set, a span wrapper will be rendered around the <button />. For most scenarios you will then use TooltipWrapperCssClass instead of CssClass. |
| TooltipCssClass | string |
Custom CSS class to render with the tooltip. |
| TooltipPlacement | TooltipPlacement |
Tooltip placement. |
| TooltipWrapperCssClass | string |
Custom CSS class to render with the tooltip span wrapper of the <button />.If set, the span wrapper will be rendered no matter the Tooltip text is set or not. |
Static properties #
| Property | Type | Description |
|---|---|---|
| Defaults | ButtonSettings |
Application-wide defaults for HxButton and derived components. |
HxNavbarCollapse #
Collapse section for Bootstrap 5 navbar component.
Derived from HxCollapse.
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| AdditionalAttributes | Dictionary<string, object> |
Additional attributes to be splatted onto an underlying div element. |
| ChildContent | RenderFragment |
Content of the collapse. |
| CollapseDirection | CollapseDirection |
Direction of the animation.
Default is CollapseDirection.Vertical. |
| CssClass | string |
Additional CSS class. |
| Id | string |
Element ID. To be referenced by HxCollapseToggleButton.CollapseTarget.
(Autogenerated GUID if not set explicitly.) |
| InitiallyExpanded | bool |
Determines whether the collapse will be open or closed (expanded or collapsed) when first rendered. |
| OnHidden | EventCallback<string> |
This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). |
| OnShown | EventCallback<string> |
This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). |
| Parent | string |
If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (Similar to traditional accordion behavior.) |
Methods #
| Method | Returns | Description |
|---|---|---|
| HideAsync() | Task |
Collapses the item. |
| ShowAsync() | Task |
Expands the item. |
HxNavbarText #
Text content for the HxNavbar.
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| ChildContent | RenderFragment |
Content of the component. |
| CssClass | string |
Any additional CSS class to apply. |