HxNavbar #

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

UPDATE v4.0.1: As Bootstrap 5.3 now expects you to use text and background color CSS utilities to customize the navbar with the CssClass parameter, we have changed the default value of the Color parameter to ThemeColor.None to avoid interfering with your CSS classes. You can still use Color="ThemeColor.Light" to get the original navbar color.

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 the <HxNavbarText /> component.

Color schemes #

Colors can be set using the Color and Theme parameters. Additional colors can be achieved with the CssClass parameter.

API #

Parameters #

Name	Type	Description
ChildContent	`RenderFragment`	Content of the navbar.
Color	`ThemeColor`	Color (background). The default value is `ThemeColor.None`.
ColorMode	`ColorMode`	Bootstrap theme (color mode) applied to the navbar. The default value is `ColorMode.Auto` (none).
ContainerCssClass	`string`	Container CSS class. The default value is `container-fluid`.
CssClass	`string`	Additional CSS class.
Expand	`NavbarExpand`	Responsive expand setting (breakpoint) for `HxNavbar`. The default value is `NavbarExpand.LargeUp`.
Id	`string`	Element ID. (An autogenerated GUID is used 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 a single `HxCollapse` or `.class` for multiple `HxCollapse`s.
Color	`ThemeColor?`	Bootstrap button style - theme color. The default is taken from `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. The default is `ButtonIconPlacement.Start` (configurable through `Defaults`).
OnClickPreventDefault	`bool`	Prevents the default action for the onclick event. Default is `false`.
OnClickStopPropagation	`bool`	Stops onClick-event propagation. Default is `true`.
Outline	`bool?`	Bootstrap "outline" button style.
Settings	`ButtonSettings`	Set of settings to be applied to the component instance (overrides `Defaults`, overridden by individual parameters).
SingleClickProtection	`bool`	Sets `false` if you want to allow multiple `OnClick` handlers in parallel. Default is `true`.
Size	`ButtonSize?`	Button size. The default is `ButtonSize.Regular`.
Spinner	`bool?`	Sets the 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 whether the `Tooltip` text is set or not.

Event callbacks #

Name	Type	Description
OnClick	`EventCallback<MouseEventArgs>`	Raised after the button is clicked.
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.

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.
Parent	`string`	If a 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.)

Event callbacks #

Name	Type	Description
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 become visible to the user (will wait for CSS transitions to complete).

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.