Bootstrap 5 Navbar component - responsive navigation header.
With support for branding, navigation, and more, including support for the collapse plugin.
Navbars may contain bits of text with the help of <HxNavbarText />
component.
Colors can be set with Color
and ColorScheme
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.) |
Bootstrap navbar-brand component.
Name | Type | Description |
---|---|---|
ChildContent | RenderFragment |
Content of the navbar-brand. |
CssClass | string |
Additional CSS class. |
Href | string |
The navigation target. Default is "/" . |
Bootstrap 5 navbar-toggler component.
Derived from HxCollapseToggleButton
.
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 HxCollapse s. |
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. |
Property | Type | Description |
---|---|---|
Defaults | ButtonSettings |
Application-wide defaults for HxButton and derived components. |
Collapse section for Bootstrap 5 navbar component.
Derived from HxCollapse
.
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.) |
Method | Returns | Description |
---|---|---|
HideAsync() | Task |
Collapses the item. |
ShowAsync() | Task |
Expands the item. |
Text content for the HxNavbar
.
Name | Type | Description |
---|---|---|
ChildContent | RenderFragment |
Content of the component. |
CssClass | string |
Any additional CSS class to apply. |