HxNavbar #

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

Basic usage #

<HxNavbar CssClass="bg-body-tertiary">
    <HxNavbarBrand>Navbar</HxNavbarBrand>
    <HxNavbarToggler />
    <HxNavbarCollapse>
        <HxNav CssClass="me-auto mb-2 mb-lg-0">
            <HxNavLink Href="/components/HxNavbar">Home</HxNavLink>
            <HxNavLink Href="#">Link</HxNavLink>
            <HxDropdown>
                <HxDropdownToggleElement ElementName="a" Caret="true" role="button">Dropdown</HxDropdownToggleElement>
                <HxDropdownMenu>
                    <HxDropdownItemNavLink Href="#">Action</HxDropdownItemNavLink>
                    <HxDropdownItemNavLink Href="#">Another action</HxDropdownItemNavLink>
                    <HxDropdownDivider />
                    <HxDropdownItemNavLink Href="#">Something else here</HxDropdownItemNavLink>
                </HxDropdownMenu>
            </HxDropdown>
            <HxNavLink Enabled="false">Disabled</HxNavLink>
        </HxNav>
        <EditForm Model="@query">
            <div class="d-flex">
                <HxInputText CssClass="me-2" Placeholder="Search" @bind-Value="@query" />
                <HxSubmit Color="ThemeColor.Success" Outline="true">Search</HxSubmit>
            </div>
        </EditForm>
    </HxNavbarCollapse>
</HxNavbar>

@code {
    private string query = String.Empty;
}

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 Theme parameters. Additional colors can be achieved with CssClass parameter.

API #

Parameters #

Name Type Description
ChildContent RenderFragment Content of the navbar.
Color ThemeColor Color (background). Default is ThemeColor.None.
ColorMode ColorMode Bootstrap theme (color mode) applied to the navbar. Default is ColorMode.Auto (none).
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.
An unhandled error has occurred. Reload 🗙