HxSidebar #

Sidebar component - responsive navigation sidebar.

One level of item nesting is supported.

Basic usage #

Inverted (dark) variant #

Similarly to Bootstrap Navbar, the Sidebar color can be inverted with data-bs-theme="dark" attribute on parent div.

Colors #

Similarly to Bootstrap Navbar, you can use utility classes to create any color variation eg. bg-body-secondary. Colors of the items and active/hover states need to be fine-tuned via CSS vars.

Logo #

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

HAVIT Blazor

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 #

CSS variables #

HxSidebarItem #

Item for the HxSidebar.

API #

Parameters #

Event callbacks #

HxSidebarBrand #

Brand for the HxSidebar.HeaderTemplate.

API #

Parameters #