HxSidebar

Sidebar component - responsive navigation sidebar.

Demo

Responsive layout

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="HxToastContainerPosition.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
HeaderTemplate RenderFragment Sidebar header.
ItemsTemplate RenderFragment Sidebar items. Use HxSidebarItem.
ExpandIcon IconBase Icon for expanding the desktop version.
CollapseIcon IconBase Icon for collapsing the desktop version.
FooterTemplate RenderFragment Sidebar footer (e.g. logged user, language switch, ...).
CssClass string Additional CSS class.
Id string ID of the root sidebar HTML element. (Autogenerated if not set.)

CSS Variables

Name Description Default
--hx-sidebar-link-hover Color on hover. #f2f9ff
--hx-sidebar-box-shadow Box shadow. 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)
--hx-sidebar-background-color Background color. white
--hx-sidebar-border Border. 1px solid #e9ecef
--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 #dee2e6
--hx-sidebar-toggler-background Toggler background. #ffffff
--hx-sidebar-item-font-size Font size of the items. 1rem
--hx-sidebar-item-padding Padding of the items. .75rem
--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 2.25rem
--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

HxSidebarItem

Item for the HxSidebar.

API

Parameters

Name Type Description
Text string Item text.
Icon IconBase Item icon (optional).
Href string Item navigation target.
Match NavLinkMatch? URL matching behavior for the underlying NavLink. Default is NavLinkMatch.Prefix.
Enabled bool Allows you to disable the item with false. Default is true.
CssClass string Any additional CSS class to add.
ChildContent RenderFragment Sub-items (not intended to be used for any other purpose).

HxSidebarBrand

Brand for the HxSidebar.HeaderTemplate.

API

Parameters

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