HxNavbar

Bootstrap 5 Navbar component - responsive navigation header.
With support for branding, navigation, and more, including support for the collapse plugin.

Example

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
Color ThemeColor Color (background). Default is ThemeColor.Light.
ColorScheme NavbarColorScheme Color scheme.
Default is NavbarColorScheme.Light.
Expand NavbarExpand Responsive expand setting (breakpoint) for HxNavbar.
Default is NavbarExpand.LargeUp.
Id string Element ID. (Autogenerated GUID if not set explicitly.)
CssClass string Additional CSS class.
ChildContent RenderFragment Content of the navbar.

HxNavbarBrand

Bootstrap navbar-brand component.

API

Parameters

Name Type Description
Href string The navigation target. Default is "/".
CssClass string Additional CSS class.
ChildContent RenderFragment Content of the navbar-brand.

HxNavbarToggler

Bootstrap 5 navbar-toggler component. Derived from HxCollapseToggleButton.

API

Parameters

Name Type Description
CollapseTarget string Target selector of the toggle. Use #id to reference single HxCollapse or .class for multiple HxCollapses.
Text string Text of the button.
ChildContent RenderFragment Button content.
Icon IconBase Icon to render into the button.
Color ThemeColor? Bootstrap button style - theme color.
Default is taken from HxButton.Defaults (ThemeColor.None if not customized).
Size ButtonSize? Button size. Default is ButtonSize.Regular.
Outline bool? Bootstrap "outline" button style.
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.
Enabled bool?
EditContext EditContext Associated EditContext.
FormId string Specifies the form the button belongs to.
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.
TooltipPlacement TooltipPlacement Tooltip placement.
TooltipCssClass string Custom CSS class to render with the tooltip.
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.
OnClickStopPropagation bool Stop onClick-event propagation. Deafult is true.
OnClickPreventDefault bool Prevents the default action for the onclick event. Deafult is false.
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.
SingleClickProtection bool Set false if you want to allow multiple OnClick handlers in parallel. Default is true.
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying <button> element.

Event Callbacks

Name Type Description
OnClick EventCallback<MouseEventArgs> Raised after the button is clicked.
OnValidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation succeeds.
OnInvalidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation fails.

HxNavbarCollapse

Collapse section for Bootstrap 5 navbar component. Derived from HxCollapse.

API

Parameters

Name Type Description
Id string Element ID. To be referenced by HxCollapseToggleButton.CollapseTarget. (Autogenerated GUID if not set explicitly.)
CollapseDirection CollapseDirection Direction of the animation. Default is CollapseDirection.Vertical.
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.)
CssClass string Additional CSS class.
ChildContent RenderFragment Content of the collapse.

Event Callbacks

Name Type Description
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).
OnHidden EventCallback<string> This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

Methods

Method Returns Description
ShowAsync() Task Expands the item.
HideAsync() Task Collapses the item.

HxNavbarText

Text content for the HxNavbar.

API

Parameters

Name Type Description
CssClass string Any additional CSS class to apply.
ChildContent RenderFragment
An unhandled error has occurred. Reload 🗙