HxSidebar #

Sidebar component - responsive navigation sidebar.

Basic usage #

Use your own custom logo in the sidebar header by setting the LogoTemplate parameter (RenderFragment) on the HxSidebarBrand component.

Custom content for items #

If you'd like to include more than just an icon and text in the HxSidebarItem, you can do so with the ContentTemplate parameter.

Multiple items expansion #

If you set MultipleItemsExpansion="false", upon item expansion, all other items are collapsed. If true (default), multiple items can be expanded at one time.

Expand & collapse from code #

Use the bindable Collapsed parameter to set or track the sidebar state.

Custom toggler #

With the TogglerTemplate, you can set a custom toggler for the desktop version to be rendered instead of the default visual. Render varying content based on the SidebarTogglerTemplateContext.

Responsive layout sample #

To achieve responsiveness of the sidebar (such as this documentation site has), you need to adjust the application layout. The main layout might look like this:

@inherits LayoutComponentBase

<HxMessenger Position="ToastContainerPosition.MiddleCenter" />
<HxMessageBoxHost />

@* Add .container-xxl or similar, if you want to limit page width as this documentation does. *@
<div class="d-md-flex min-vh-100">

	<HxSidebar CssClass="sticky-top">
		...
	</HxSidebar>

	<div class="main p-4 flex-grow-1 overflow-hidden">
		@Body
	</div>

</div>

You don't need any other layout-related CSS in site.css:

#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

#blazor-error-ui .dismiss {
	cursor: pointer;
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
}

API #

Parameters #

Name Type Description
Collapsed bool Indicates whether the HxSidebar is collapsed, can be used to alter the state (expand or collapse the sidebar).
CollapsedChanged EventCallback<bool> Fires when the sidebar is expanded or collapsed.
CollapseIcon IconBase CollapseIcon is obsolete and will be removed in a future release. Use TogglerTemplate if you want to render an icon.
CssClass string Additional CSS class.
ExpandIcon IconBase ExpandIcon is obsolete and will be removed in a future release. Use TogglerTemplate if you want to render an icon.
FooterTemplate RenderFragment<SidebarFooterTemplateContext> Sidebar footer (e.g. logged user, language switch, ...).
HeaderTemplate RenderFragment Sidebar header.
Id string ID of the root sidebar HTML element. (Autogenerated if not set.)
ItemsTemplate RenderFragment Sidebar items. Use HxSidebarItem.
MultipleItemsExpansion bool Whether multiple items can be in the expanded state at once. If set to false, upon item expansion, all other items are collapsed. The default is true.
ResponsiveBreakpoint SidebarResponsiveBreakpoint The breakpoint below which the sidebar switches to the mobile version (exclusive).
The default is SidebarResponsiveBreakpoint.Medium.
TogglerTemplate RenderFragment<SidebarTogglerTemplateContext> Vertical toggler (desktop version) to be rendered instead of the default bar/arrow.

CSS variables #

Name Description Default
--hx-sidebar-background-color Background color. transparent
--hx-sidebar-collapsed-width Width of collapsed sidebar. 72px
--hx-sidebar-width Width of the sidebar. 250px
--hx-sidebar-toggler-background Toggler bar/arrow background. var(--bs-gray-500)
--hx-sidebar-item-font-size Font size of the items. 1rem
--hx-sidebar-item-padding Padding of the items. .75rem
--hx-sidebar-item-color Color of the items. var(--bs-body-color)
--hx-sidebar-item-icon-color Color of the items icons. var(--bs-primary)
--hx-sidebar-item-border-radius Border radius of the items. var(--bs-border-radius-lg)
--hx-sidebar-item-hover-color Color of the items on hover. var(--bs-primary)
--hx-sidebar-item-hover-icon-color Color of the items icon on hover. var(--bs-primary)
--hx-sidebar-item-hover-background-color Background color of the items on hover. var(--bs-primary-rgb)
--hx-sidebar-item-hover-background-opacity Background opacity of the items on hover. .1
--hx-sidebar-item-active-color Color of the active item. var(--bs-primary)
--hx-sidebar-item-active-icon-color Color of the active item icon. var(--bs-primary)
--hx-sidebar-parent-item-active-icon-color Icon color of the parent of active item. var(--hx-sidebar-item-icon-color)
--hx-sidebar-item-active-background-opacity Background opacity of the active item. .1
--hx-sidebar-item-active-background-color Background color of the active item. var(--bs-primary-rgb)
--hx-sidebar-item-active-font-weight Font weight of the active item. inherit
--hx-sidebar-parent-item-active-color Color of the parent of active item. var(--hx-sidebar-item-color)
--hx-sidebar-parent-item-active-background-color Background color of the parent of active item. unset
--hx-sidebar-parent-item-active-background-opacity Background opacity of the parent of active item. 0
--hx-sidebar-parent-item-active-font-weight Font weight of the parent of active item. 600
--hx-sidebar-item-margin Margin of the items. 0 0 .25rem 0
--hx-sidebar-subitem-font-size Font size of the subitems. .875rem
--hx-sidebar-subitem-padding Padding of the subitems. .5rem
--hx-sidebar-subitem-margin Margin of the subitems. 0 0 .25rem 2rem
--hx-sidebar-header-padding Padding of the sidebar header. 1rem
--hx-sidebar-body-padding Padding of the sidebar body. 0 1rem
--hx-sidebar-footer-padding Padding of the sidebar footer. 1rem
--hx-sidebar-brand-shortname-background-color Background color of the brand short name. var(--bs-primary)
--hx-sidebar-brand-shortname-border-radius Border radius of the brand short name. .625rem
--hx-sidebar-brand-shortname-color Color of the brand short name. var(--bs-white)
--hx-sidebar-brand-shortname-width Width of the brand short name. 2.5rem
--hx-sidebar-brand-shortname-height Height of the brand short name. 2.5rem
--hx-sidebar-brand-shortname-font-weight Font weight of the brand short name. 600
--hx-sidebar-brand-logo-width Width of the brand logo. 2.5rem
--hx-sidebar-brand-logo-height Height of the brand logo. 2.5rem
--hx-sidebar-brand-name-color Color of the brand name. var(--bs-body-color)
--hx-sidebar-brand-name-font-weight Font weight of the brand name. 600
--hx-sidebar-footer-item-padding Padding of the items in the footer. .75rem
--hx-sidebar-footer-item-margin Margin of the items in the footer. 0
--hx-sidebar-footer-item-font-size Font size of the items in the footer. 1rem
--hx-sidebar-footer-item-color Color of the items in the footer. unset
--hx-sidebar-footer-item-radius Radius of the items in the footer. unset
--hx-sidebar-footer-item-hover-background-color Background color on hover of the items in the footer. unset
--hx-sidebar-footer-item-hover-background-opacity Background opacity on hover of the items in the footer. unset
--hx-sidebar-footer-item-hover-color Color on hover of the items in the footer. unset

HxSidebarItem #

Item for the HxSidebar.

API #

Parameters #

Name Type Description
ChildContent RenderFragment Sub-items (not intended to be used for any other purpose).
ContentTemplate RenderFragment<SidebarItemContentTemplateContext> Inner custom content for the HxSidebarItem.
CssClass string Any additional CSS class to add.
Enabled bool Allows you to disable the item with false. Default is true.
ExpandOnMatch bool Set to false if you don't want to expand the sidebar if URL matches.
Default is true. NOTE: The expansion is only applied on initial load, the sidebar does not track the URL changes (this may change in the future).
HighlightOnActiveChild bool Set to false if you don't want to highlight the item if one of the children items is active (URL matches).
Default is true.
Href string Item navigation target.
Icon IconBase Item icon (optional).
Match NavLinkMatch? URL matching behavior for the underlying NavLink. Default is NavLinkMatch.Prefix.
Text string Item text.
TooltipText string Text content of tooltip displayed while hovering item of collapsed Sidebar.

HxSidebarBrand #

Brand for the HxSidebar.HeaderTemplate.

API #

Parameters #

Name Type Description
BrandName string The long name of the brand.
BrandNameShort string The short name of the brand.
LogoTemplate RenderFragment<SidebarBrandLogoTemplateContext> The logo of the brand.
An unhandled error has occurred. Reload 🗙