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 bindable Collapsed parameter to set or track sidebar state.

Custom toggler #

With TogglerTemplate you can set a custom toggler for the desktop version to be rendered instead of the default ExpandIcon and CollapseIcon. 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 application layout. The main layout might look like:

@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 Icon for collapsing the desktop version. Use TogglerTemplate for more specific customization.
CssClass string Additional CSS class.
ExpandIcon IconBase Icon for expanding the desktop version. Use TogglerTemplate for more specific customization.
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 expanded state at once. If set to false, upon item expansion, all other items are collapsed. Default is true.
ResponsiveBreakpoint SidebarResponsiveBreakpoint Breakpoint below which the sidebar switches to mobile version (exclusive).
Default is SidebarResponsiveBreakpoint.Medium.
TogglerTemplate RenderFragment<SidebarTogglerTemplateContext> Vertical toggler (desktop version) to be rendered instead of the ExpandIcon and CollapseIcon icon.

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-border Toggler border. 1px solid var(--bs-border-color)
--hx-sidebar-toggler-background Toggler background. var(--bs-body-bg)
--hx-sidebar-toggler-color Toggler color. var(--bs-body-color)
--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-item-active-background-opacity Background opacity of the active item. .1
--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).
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.

HxSidebarBrand #

Brand for the HxSidebar.HeaderTemplate.

API #

Parameters #

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